代码之家 › 专栏 › 技术社区 › max

当我从另一个指定了viewBox的文件引用SVG时,为什么需要指定viewBox属性?

svg html

max · 技术社区 · 6 年前

在我的外部文件名为 icons.svg

<symbol viewBox="0 0 1117.48 823.88" id="a_day_at_the_park" xmlns="http://www.w3.org/2000/svg">
<!-- ... -->

<svg viewBox="0 0 1117.48 823.88">
  <use xlink:href="icons.svg#a_day_at_the_park"></use>
</svg>

<svg>
  <use xlink:href="icons.svg#a_day_at_the_park"></use>
</svg>

第一个很好用(使用viewBox)——与内联SVG完全相同。

viewBox 在外部文件中,当它与一起使用时不起作用 use

使用 无需具体说明 . 我有几个图标有不同的颜色 视窗 但这似乎是不可能的,我总是要复制到我的HTML?

1 回复 | 直到 6 年前

Paul LeBeau 6 年前

这个 viewBox 告诉浏览器如何定位和缩放SVG的内容。如果希望SVG具有响应性,或者SVG中的内容以不同于最终呈现大小的比例绘制,则需要将其放在任何SVG上。

<svg width="0" height="0">
  <symbol id="icon">
     <rect width="24" height="24" fill="orange"/>
     <circle cx="12" cy="12" r="10" fill="red"/>
   </symbol>
 </svg>
  
 <svg width="24" height="24">
   <use href="#icon"/>
 </svg>

但是,如果它们不是按比例1:1设计的,则渲染的SVG将始终需要 视窗

<svg width="0" height="0">
  <symbol id="icon">
     <rect width="100" height="100" fill="orange"/>
     <circle cx="50" cy="50" r="40" fill="red"/>
   </symbol>
 </svg>
  
 <svg width="24" height="24" viewBox="0 0 100 100">
   <use href="#icon"/>
 </svg>