Question

在我的外部文件icons.svg中，我有：

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

在我的HTML中：

<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的原因是什么？

使用use时，我希望得到相同的结果，而不必指定viewBox。我有几个具有不同viewBox的图标，但是似乎不可能，并且我总是必须将其复制到HTML中？

Answer 1

viewBox告诉浏览器如何定位和缩放SVG的内容。如果您希望它具有响应性，或者在SVG内部内容的绘制比例与最终呈现时的最终尺寸不同，则需要在任何SVG上添加它。

例如，如果您的SVG始终为24x24，并且您的内容（包括符号）在该24x24框内，则不需要任何viewBoxes。

<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将始终需要viewBox。但是，该符号不一定必须有一个。

<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>

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

1 个答案: