链接到 <symbol> 时无法更改 SVG <use> 图标大小

Question

我想在我的标记中使用 SVG 符号，但我无法获得 CSS 来增加元素内呈现的符号的大小？

我在一组标签中定义了一个 Twitter 徽标，然后我用 xlink:href 内部使用标签引用它。该图标正在显示，但是当我将 CSS 添加到包含该元素的 #box1 div 时，该符号的大小没有增加或减少，并且似乎仅以 viewBox 大小呈现。

此外，当我将 SVG 元素悬停在开发工具上时，它本身以 300 x 150 像素呈现 - 但代码中没有这些测量值。

我真的很困惑——任何帮助都会很棒。

#box1 {
  height: 10rem;
  width: 10rem;
}

<defs style="display: none;">
  <svg id="twitter" viewBox="0 0 19.19 15.95">
      <symbol id="twitter-symbol"><title>twitter</title>
          <path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">
          </path>
      </symbol>
  </svg>
</defs>

<div id="box1">
  <svg>
      <use xlink:href="#twitter-symbol"/>
  </svg>
</div>

Answer 1

<defs>是一个svg元素。它总是在 svg 中。我做了一些更改，现在可以使用了。请运行代码看看我做了什么

#box1 {
  height: 10rem;
  width: 10rem;
}

#twitter{display:none;}

<svg id="twitter">
    <defs>
      <symbol id="twitter-symbol"><title>twitter</title>
          <path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">
          </path>
      </symbol>
    </defs>
  </svg>


<div id="box1">
  <svg viewBox="0 0 19.19 15.95" width="24">
      <use xlink:href="#twitter-symbol"/>
  </svg>
</div>

希望对您有所帮助。

Answer 2

您在 HTML 中使用内联 SVG 代码，因此我相信 SVG 路径需要在其中定义一个视图框。例如，如果您在 HTML SVG 标签中添加 viewBox="0 0 60 55"，您会注意到尺寸将开始调整。所以编辑你的 HTML

的这一部分

<svg viewBox="0 0 60 55">
   <use xlink:href="#twitter-symbol"/>
</svg>

为了扩展您发现尺寸列为 300x150 的注释，这是适用于 HTML 内联 SVG 代码的默认标准尺寸（根据 HTML5 规范）。这有时会因浏览器而异。

请记住，处理 SVG 时可以使用几种不同的方法。查看下面的指南，其中他们对 SVG 给出了很好的运行评价以及如何操纵它的大小。您可能会找到您更喜欢使用的替代方法。

https://css-tricks.com/scale-svg/

链接到 <symbol> 时无法更改 SVG <use> 图标大小

Cannot Change SVG <use> icon size when linked to <symbol>

css

svg

symbols