删除SVG周围不需要的额外空白？

huangapple
go评论80阅读模式
英文:

Remove unwanted additional space around SVG?

问题

当我为SVG添加width和height时，出现了额外的空白空间。

以下是HTML代码：

<svg>
  <use href="https://example.com/sprite-svg.svg#moneyback-icon"></use>
</svg>

以及SVG代码：

<svg width="0" height="0" class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 1024 1024" id="moneyback-icon">
    <path fill="#E69329" d="M249.6 460.8 358.4 672l202.7-83.2 93.8-271L339.2 335z"></path>
    <path fill="#546E7A" d="M153.6 768a166.4 166.4 0 1 0 332.8 0 166.4 166.4 0 1 0-332.8 0Z"></path>
    <path fill="#90A4AE" d="M320 576c-106.7 0-192 85.3-192 192s85.3 192 192 192 192-85.3 192-192-85.3-192-192-192zm0 341.3c-83.2 0-149.3-66.1-149.3-149.3S236.8 618.7 320 618.7 469.3 684.8 469.3 768 403.2 917.3 320 917.3z"></path>
    <path fill="#90A4AE" d="M298.7 704h42.6v170.7h-42.6z"></path>
    <path fill="#FFB74D" d="M275.2 768c21.3 40.5 68.3 57.6 108.8 36.3l352-181.4a127 127 0 0 0 47-40.5c36.2-68.3 119.4-228.3 174.9-367L569.6 401.2 467.2 554.7l-145 76.8c-55.5 27.7-72.6 89.6-47 136.5z"></path>
    <path fill="#FFB74D" d="m644.3 64-352 134.4c-15 4.3-32 21.3-47 36.3L126 394.7a116 116 0 0 0-10.7 108.8c8.5 21.3 36.3 72.5 66.1 130.1A188 188 0 0 1 320 576c8.5 0 19.2 0 27.7 2.1L303 488.5l98.2-87.4h170.6S902.4 354 960 215.5L644.3 64z"></path>
    <path fill="#FFCDD2" d="M388.3 768a51.6 51.6 0 0 1-70.4-27.7 51.6 51.6 0 0 1 27.7-70.4c25.6-12.8 68.3 85.3 42.7 98.1z"></path>
  </symbol>
</svg>

希望这对你有所帮助。

英文:

I use sprite SVG, everything is ok until I add width and height to my SVG.

But when I add some width and height, additional space appears.
删除SVG周围不需要的额外空白？

Here is HTML code:

&lt;svg&gt;
&lt;use href=&quot;https://example.com/sprite-svg.svg#moneyback-icon&quot;&lt;/use&gt;
&lt;/svg&gt;

And SVG:

&lt;svg width=&quot;0&quot; height=&quot;0&quot; class=&quot;hidden&quot;&gt;
&lt;symbol xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;100&quot; height=&quot;100&quot; viewBox=&quot;0 0 1024 1024&quot; id=&quot;moneyback-icon&quot;&gt;
&lt;path fill=&quot;#E69329&quot; d=&quot;M249.6 460.8 358.4 672l202.7-83.2 93.8-271L339.2 335z&quot;&gt;&lt;/path&gt;
&lt;path fill=&quot;#546E7A&quot; d=&quot;M153.6 768a166.4 166.4 0 1 0 332.8 0 166.4 166.4 0 1 0-332.8 0Z&quot;&gt;&lt;/path&gt;
&lt;path fill=&quot;#90A4AE&quot; d=&quot;M320 576c-106.7 0-192 85.3-192 192s85.3 192 192 192 192-85.3 192-192-85.3-192-192-192zm0 341.3c-83.2 0-149.3-66.1-149.3-149.3S236.8 618.7 320 618.7 469.3 684.8 469.3 768 403.2 917.3 320 917.3z&quot;&gt;&lt;/path&gt;
&lt;path fill=&quot;#90A4AE&quot; d=&quot;M298.7 704h42.6v170.7h-42.6z&quot;&gt;&lt;/path&gt;
&lt;path fill=&quot;#FFB74D&quot; d=&quot;M275.2 768c21.3 40.5 68.3 57.6 108.8 36.3l352-181.4a127 127 0 0 0 47-40.5c36.2-68.3 119.4-228.3 174.9-367L569.6 401.2 467.2 554.7l-145 76.8c-55.5 27.7-72.6 89.6-47 136.5z&quot;&gt;&lt;/path&gt;
&lt;path fill=&quot;#FFB74D&quot; d=&quot;m644.3 64-352 134.4c-15 4.3-32 21.3-47 36.3L126 394.7a116 116 0 0 0-10.7 108.8c8.5 21.3 36.3 72.5 66.1 130.1A188 188 0 0 1 320 576c8.5 0 19.2 0 27.7 2.1L303 488.5l98.2-87.4h170.6S902.4 354 960 215.5L644.3 64z&quot;&gt;&lt;/path&gt;
&lt;path fill=&quot;#FFCDD2&quot; d=&quot;M388.3 768a51.6 51.6 0 0 1-70.4-27.7 51.6 51.6 0 0 1 27.7-70.4c25.6-12.8 68.3 85.3 42.7 98.1z&quot;&gt;&lt;/path&gt;
&lt;/symbol&gt;
&lt;/svg&gt;

答案1

得分: 1

以下是您要翻译的内容：

"300x150"是您在开发工具中看到的SVG的默认大小，没有定义宽度、高度或viewBox属性。给SVG添加一个viewBox属性。只要符合内容的纵横比（在这种情况下，引用具有宽度1024和高度1024的<symbol>元素的<use>元素）。现在（在定义了viewBox之后），您可以删除<symbol>元素上的宽度和高度属性。它们只会混淆事情。然后让CSS控制SVG的宽度和高度（这里宽度为120px），可以直接在SVG上或在父HTML元素上设置。

<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <use href="#moneyback-icon"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" class="hidden">
  <symbol viewBox="0 0 1024 1024" id="moneyback-icon">
    <path fill="#E69329" d="M249.6 460.8 358.4 672l202.7-83.2 93.8-271L339.2 335z"></path>
    <path fill="#546E7A" d="M153.6 768a166.4 166.4 0 1 0 332.8 0 166.4 166.4 0 1 0-332.8 0Z"></path>
    <path fill="#90A4AE" d="M320 576c-106.7 0-192 85.3-192 192s85.3 192 192 192 192-85.3 192-192-85.3-192-192-192zm0 341.3c-83.2 0-149.3-66.1-149.3-149.3S236.8 618.7 320 618.7 469.3 684.8 469.3 768 403.2 917.3 320 917.3z"></path>
    <path fill="#90A4AE" d="M298.7 704h42.6v170.7h-42.6z"></path>
    <path fill="#FFB74D" d="M275.2 768c21.3 40.5 68.3 57.6 108.8 36.3l352-181.4a127 127 0 0 0 47-40.5c36.2-68.3 119.4-228.3 174.9-367L569.6 401.2 467.2 554.7l-145 76.8c-55.5 27.7-72.6 89.6-47 136.5z"></path>
    <path fill="#FFB74D" d="m644.3 64-352 134.4c-15 4.3-32 21.3-47 36.3L126 394.7a116 116 0 0 0-10.7 108.8c8.5 21.3 36.3 72.5 66.1 130.1A188 188 0 0 1 320 576c8.5 0 19.2 0 27.7 2.1L303 488.5l98.2-87.4h170.6S902.4 354 960 215.5L644.3 64z"></path>
    <path fill="#FFCDD2" d="M388.3 768a51.6 51.6 0 0 1-70.4-27.7 51.6 51.6 0 0 1 27.7-70.4c25.6-12.8 68.3 85.3 42.7 98.1z"></path>
  </symbol>
</svg>

注意：上述内容已根据您的要求进行翻译，只包含翻译的部分，没有其他内容。

英文:

The size 300x150 that you can see in the dev tools is the default size of an SVG, where no width, height or viewBox attribute has been defined. Give the SVG a viewBox attribute. The numbers are not important as long as if fits the aspect ratio of the content (in this case the &lt;use&gt; element that refers to a &lt;symbol&gt; elements that has a viewBox 1024 wide and 1024 high). Now (after defining the viewBox) you can remove the width and height attributes of the &lt;symbol&gt; element. They will just confuse stuff. And then let the CSS control the width and height of the SVG (here width of 120px) either directly on the SVG or on a parent HTML element.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

svg.icon {
  border: thin solid red;
  width: 120px;
}

svg.hidden {
  visibility: hidden;
}

<!-- language: lang-html -->

&lt;svg class=&quot;icon&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
  &lt;use href=&quot;#moneyback-icon&quot;/&gt;
&lt;/svg&gt;


&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;0&quot; height=&quot;0&quot; class=&quot;hidden&quot;&gt;
  &lt;symbol viewBox=&quot;0 0 1024 1024&quot; id=&quot;moneyback-icon&quot;&gt;
    &lt;path fill=&quot;#E69329&quot; d=&quot;M249.6 460.8 358.4 672l202.7-83.2 93.8-271L339.2 335z&quot;&gt;&lt;/path&gt;
    &lt;path fill=&quot;#546E7A&quot; d=&quot;M153.6 768a166.4 166.4 0 1 0 332.8 0 166.4 166.4 0 1 0-332.8 0Z&quot;&gt;&lt;/path&gt;
    &lt;path fill=&quot;#90A4AE&quot; d=&quot;M320 576c-106.7 0-192 85.3-192 192s85.3 192 192 192 192-85.3 192-192-85.3-192-192-192zm0 341.3c-83.2 0-149.3-66.1-149.3-149.3S236.8 618.7 320 618.7 469.3 684.8 469.3 768 403.2 917.3 320 917.3z&quot;&gt;&lt;/path&gt;
    &lt;path fill=&quot;#90A4AE&quot; d=&quot;M298.7 704h42.6v170.7h-42.6z&quot;&gt;&lt;/path&gt;
    &lt;path fill=&quot;#FFB74D&quot; d=&quot;M275.2 768c21.3 40.5 68.3 57.6 108.8 36.3l352-181.4a127 127 0 0 0 47-40.5c36.2-68.3 119.4-228.3 174.9-367L569.6 401.2 467.2 554.7l-145 76.8c-55.5 27.7-72.6 89.6-47 136.5z&quot;&gt;&lt;/path&gt;
    &lt;path fill=&quot;#FFB74D&quot; d=&quot;m644.3 64-352 134.4c-15 4.3-32 21.3-47 36.3L126 394.7a116 116 0 0 0-10.7 108.8c8.5 21.3 36.3 72.5 66.1 130.1A188 188 0 0 1 320 576c8.5 0 19.2 0 27.7 2.1L303 488.5l98.2-87.4h170.6S902.4 354 960 215.5L644.3 64z&quot;&gt;&lt;/path&gt;
    &lt;path fill=&quot;#FFCDD2&quot; d=&quot;M388.3 768a51.6 51.6 0 0 1-70.4-27.7 51.6 51.6 0 0 1 27.7-70.4c25.6-12.8 68.3 85.3 42.7 98.1z&quot;&gt;&lt;/path&gt;
  &lt;/symbol&gt;
&lt;/svg&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月9日 16:46:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/76866029-2.html
  • css
  • html
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定