SVG 元素宽度和高度在 html 中设置，但在检查器中显示为 0 0

Question

我有一个像这样的 svg 矩形：

<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>

当我用 Chrome 检查第二个矩形时，它没有宽度和高度。 没有适用于它的 CSS 规则。为什么不受宽高影响？

Answer 1

它工作正常。

如果 sn-p 单独工作，但代码中包含它的 div 的大小显示为 0x0，请查看：Why is my div's height zero

它通常是在设置float时引起的。

<div>
  <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>
</div>

Answer 2

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

仅仅因为您的<rect> 具有宽度和高度，并不意味着您的 SVG 具有。 SVG 不像 HTML，它的元素会扩展以适应它们的子元素。 SVG 就像<canvas> 元素。您必须确保它显式（或隐式）具有大小。

您没有为<svg> 元素指定宽度或高度属性，因此它们都默认为“100%”。它们的 100% 取决于 SVG 的父元素的大小。这就是我上面的第一个问题。

Answer 3

对于“内联”SVG 元素，您必须在 svg 元素本身内应用样式。 在<defs></defs> 标签内。由于它有自己的 DOM[文档对象模型]，因此从外部应用到它的 Css 将不起作用。

您有几个不同的选项来嵌入 SVG，您可以使用它inline，如在您的 html/php 文档中声明 <svg></svg> 的示例中，或者您可以使用下面列出的许多其他方法之一;

嵌入：.................................................. ..<img src="../pathtoyourSvg"></img>
嵌入为带有后备选项的 img：<img src="logo.png" srcset="logo.svg" alt="My logo">

使用：.................................................. ........<object type="image/svg+xml" data="image.svg"> <!-- Your fall back here --> <img src="image.svg" /> </object>
采用： ................................................ .........<embed type="image/svg+xml" src="image.svg" />
使用：.................................................. .....<iframe></iframe>

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

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

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

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

但是从我读过的 cmets & Questions 来看，这需要是 Url 或 Base64 编码的，这似乎有点 Hacky 并且不是很方便。

他们每个人都有自己的优点和缺点。

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

另外值得一提的是，如果你有 display:flex;附加到 elemnet 或其父级，则宽度和高度值将不会影响弹性项目。所以它可能在控制台中显示为 0, 0。

一些有用的信息和相关问题：
Svg Coords & Units w3.org
Svg Width - Height
Applying Styles to an embedded Svg

Answer 4

您可以将 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>

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