HTML 中的 <use> 标签是否有任何原因以不同的高度和宽度维度呈现 svg？

Question

我有一个 SVG 元素，我想在很多地方使用它，所以我使用了 use 标签。SVG 标签内的 use 标签以较小的高度和宽度尺寸渲染 svg，即我要求 20x20 尺寸，它以 17x17 渲染。

<svg id='polyline' height='210' width='400'><path d='M150 0 L75 200 L225 200 Z' /></svg> 

<svg id='graph' width="12cm" height="5.25cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">


  <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
        fill="red" stroke="blue" stroke-width="5" />
  <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
        fill="yellow" stroke="blue" stroke-width="5" />

</svg>

<p>I have got 54 x 54 image instead of 100 x 200<p>
<svg>
        <use href='#graph' height='100' width='200'></use>
      </svg>
<p>I have got 5 x 5 image instead of 20 x 20<p>
<svg>
        <use href='#graph' height='20' width='20'></use>
      </svg>

高100×宽200

 <svg><use href='#polyline' height='100' width='200'></use></svg>

高30×宽30

 <svg><use href='#polyline' height='30' width='30'></use></svg>

这又为我提供了一个具有较小高度和宽度的三角形svg，这不是所需的，这是因为viewbox吗？或者我怎样才能获得所需的高度和宽度。

Answer 1

HTML 中的标签用于在文档中嵌入和重用 SVG 图形。当您使用标签引用 SVG 时，引用的 SVG 的渲染尺寸与标签中指定的尺寸可能存在差异。这是因为标签允许您引用 SVG 的特定部分并将其应用到不同的比例或位置。

基本语法：

<svg>
  <use xlink:href="#symbolId" width="desiredWidth" height="desiredHeight"></use>
</svg>

xlink:href 属性指的是要重用的原始 SVG 元素的 ID。您可以指定宽度和高度属性来控制渲染的 SVG 的大小。

缩放和转换：

该标签允许您对引用的 SVG 应用转换（例如缩放）。如果原始 SVG 具有不同的大小，这些转换可能会导致不同的渲染尺寸。

<svg>
  <use xlink:href="#symbolId" width="100" height="50" transform="scale(2)"></use>
</svg>

视口和坐标系：

原始 SVG 和上下文的视口和坐标系可能不同，导致渲染尺寸发生变化。

<svg viewBox="0 0 100 50">
  <use xlink:href="#symbolId" width="50" height="25"></use>
</svg>

保持纵横比：

标签保留引用的 SVG 的纵横比。如果您仅指定一个尺寸（宽度或高度），则会自动调整另一个尺寸以保持原始宽高比。

<svg>
  <use xlink:href="#symbolId" width="100"></use>
</svg>

未指定尺寸：

如果您未在标签中指定尺寸，则渲染尺寸将从引用的 SVG 继承。

<svg>
  <use xlink:href="#symbolId"></use>
</svg>

总结

HTML 中的标签允许重用 SVG 图形，并灵活地控制尺寸和应用转换。然而，了解这些尺寸是如何确定的以及变换如何影响它们对于实现所需的渲染结果至关重要。