Question

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

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

此外，当我使用dev工具将其悬停时，SVG元素本身的渲染尺寸为300 x 150px-但是这些尺寸在代码中没有任何内容。

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

#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" viewBox="0 0 19.19 15.95" >
    <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>
      <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，以及如何控制SVG的大小。您可能会找到一种更喜欢使用的替代方法。

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

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

2 个答案: