链接到 <符号> 时无法更改 SVG <使用> 图标大小

Question

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

\n\n

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

\n\n

另外，当我将 SVG 元素悬停在开发工具上时，它本身会以 300 x 150px 渲染 - 但代码中没有任何这些测量值。

\n\n

我真的很困惑 \xe2\x80\x94 任何帮助都会很棒。

\n\n

\r\n

\r\n

#box1 {\r\n  height: 10rem;\r\n  width: 10rem;\r\n}

\r\n

<defs style="display: none;">\r\n  <svg id="twitter" viewBox="0 0 19.19 15.95">\r\n      <symbol id="twitter-symbol"><title>twitter</title>\r\n          <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">\r\n          </path>\r\n      </symbol>\r\n  </svg>\r\n</defs>\r\n\r\n<div id="box1">\r\n  <svg>\r\n      <use xlink:href="#twitter-symbol"/>\r\n  </svg>\r\n</div>

\r\n

\r\n

\r\n

\n

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>

我希望它有帮助。