Javascript SVG元素宽度和高度在html中设置，但在inspector中显示为0

我有一个svg矩形，如下所示：

它工作正常

如果代码段单独工作，但代码中包含它的div的大小显示为0x0，请查看：

它通常是在设置了

float

时产生的

---

您确实没有提供足够的信息。例如，SVG的父元素是什么

仅仅因为您的

具有宽度和高度，并不意味着您的SVG具有宽度和高度。SVG不同于HTML，在HTML中元素可以扩展以适合其子元素。SVG类似于

元素。您必须确保它显式（或隐式）具有大小

---

您没有为

元素指定宽度或高度属性，因此它们都默认为“100%”。它们的100%大小取决于SVG的父元素的大小。因此，我提出了上面的第一个问题。

您可以将svg元素包装在html5对象元素中

<style type="text/css">
object{
width:300px;
height:200px;
}
object svg{
width:100%;
height:100%;
}
</style>

<object>
<svg class="legend-square">
  <defs>
    <pattern id="pattern1" width="3"
     height="3" patternunits="userSpaceOnUse" patterntransform="rotate(-45)">
      <rect width="2" height="3" transform="translate(0,0)" fill="purple"></rect>
    </pattern>
  </defs>
  <rect width="12" height="12" fill="url(#pattern1)"></rect>
</svg>
</object>

反对{
宽度：300px；
高度：200px；
}
对象svg{
宽度：100%；
身高：100%；
}

---

您可以在对象元素上设置高度和宽度，只需链接任何其他html元素，而SVG元素的高度和宽度可以设置为100%。它会起作用的。但是首先，通过直接在chrome中打开文件来测试SVG。

对于“内联”SVG元素，您必须在SVG元素本身内部应用样式。 在

标记内。因为它有自己的DOM[文档对象模型]，所以从外部应用到它的Css将没有效果

嵌入SVG有几种不同的选项，您可以使用它

内联

，就像您在html/php文档中声明

的示例一样，或者您可以使用下面列出的许多其他方法之一

嵌入一个： 作为一个img嵌入，带有一个回退选项：

使用：……………<代码>
使用：代码>
使用：……………

使用Javascript将Svg嵌入画布元素中：

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "path2your.svg";

您还可以使用Css背景图像嵌入Svg， 即：

但从我读到的评论和问题来看，这需要Url或Base64编码，这似乎有点不太方便

它们各有优缺点

由于安全原因，一些SVG嵌入方法将阻止对外部资源（包括CSS、字体和javascript）的访问。特别是当我们有多个图像时，理想情况下，我们的嵌入方法应该能够引用单个CSS、字体或javascript文件（以节省资源），并且能够操作嵌入的SVG

还值得一提的是，如果您有display:flex；如果附加到元素或其父元素，则“宽度”和“高度”值对弹性项没有影响。因此，它可能在控制台中显示为0，0

一些有用的信息和相关问题：

---

渲染是否不正确，如果不是，您为什么会在意？他可能会在意，因为它没有按预期运行……渲染不正确。矩形没有显示，因为它没有大小。您的svg代码可能与@user3162553重复。它贴在下面。主要是你的css。您可以使用

float

。父元素是一个div，它的高度和宽度为12px，当前在检查时显示。然后创建一个显示问题的示例。目前，您的代码段可以在所有浏览器中运行。因此，要帮助您解决问题几乎是不可能的。您已经说过可以将svg包装在一个对象元素中，但只是对提供的代码进行了整理，而没有给出示例说明您的意思？这不是您使用该元素的方式。。。此元素使用其

data

属性加载您将指向的资源。

.mySvgContainer{
   background-image:url('PathToMySvg');
}