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

【问题标题】：Cannot Change SVG <use> icon size when linked to <symbol>链接到 <symbol> 时无法更改 SVG <use> 图标大小
【发布时间】：2018-09-04 12:26:17
【问题描述】：

我正在尝试在我的标记中使用 SVG 符号，但我无法让 CSS 增加元素内呈现的符号的大小？

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

此外，当我使用开发工具将 SVG 元素悬停在 300 x 150 像素时，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>

【问题讨论】：

除非您为

标签： css svg symbols

【解决方案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>

希望对你有帮助。

【讨论】：

【解决方案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/

【讨论】：