去除SVG周围的不需要的额外空格？

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

Remove unwanted additional space around SVG?

问题

我使用了sprite SVG，一切都很好，直到我给SVG添加了width和height属性。

但是当我添加了一些width和height后，会出现额外的空白空间。
去除SVG周围的不需要的额外空格？

以下是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 335"></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的默认大小，当没有定义width、height或viewBox属性时。给SVG添加一个viewBox属性。只要它符合内容的纵横比（在这种情况下，是引用了一个具有1024宽和1024高的<symbol>元素的<use>元素）。现在（在定义了viewBox之后），你可以删除<symbol>元素的width和height属性。它们只会混淆事情。然后让CSS控制SVG的宽度和高度（这里是120px），可以直接在SVG上或父HTML元素上设置。

<!-- 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 -->
<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 335"></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>

<!-- end snippet -->
英文:

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.html
  • css
  • html
  • svg
匿名

发表评论

匿名网友

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

确定