<use> svg 路径的位置

Question

我需要定位我从互联网某处获得的图标路径（很快将被我自己的替换）。我第一次尝试将 <symbol> 与 <use> 结合使用并没有给我想要的东西，尽管进行了重大修改（在下面的示例中图标不会进入正方形内）。然后我发现使用 <g> 而不是 <symbol> 可以解决问题，但代价是我自己手动缩放路径。由于自动缩放更好，所以应该有一种方法可以使用 <symbol> 来准确定位。

W3 specs 提到了 <use> 的不同行为，具体取决于引用是 <symbol>、<svg> 还是其他，但这就在我头上。

<!DOCTYPE html>
<title>Icon won't get in box</title>

<body>
<svg>
<defs>
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol>
<g id='back2' transform='scale(.062)'>
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path>
</g>
</defs>

<g transform='translate(50,50)'>
<rect height='30' width='30' fill='#DDD' />
<use xlink:href='#backward' height='30' x='0' y='0' />
</g>

<g transform='translate(50, 100)'>
<rect height='30' width='30' fill='#DDD' />
<use xlink:href='#back2' x='0' y='0' />
</g>
</svg>
</body>

Answer 1

在我看来，该符号是使用 Inkscape 等 SVG 编辑器创建的，但随后未正确清理。特别是对于这样一个简单的符号，我看不出有任何理由使用精确到小数点后 7 位的三次贝塞尔曲线。

我建议重新设计符号以大大简化其 SVG 代码。对于像这样的基本箭头，您甚至可以只使用 <polyline> 元素。正确定义的符号将更容易<use>（双关语！）

Answer 2

您只需将 width="30" 添加到您的 <use> 参考。

<svg>
<defs>
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol>
<g id='back2' transform='scale(.062)'>
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path>
</g>
</defs>

<g transform='translate(50,50)'>
<rect height='30' width='30' fill='#DDD' />
<use xlink:href='#backward' width="30" height='30' x='0' y='0' />
</g>

<g transform='translate(50, 100)'>
<rect height='30' width='30' fill='#DDD' />
<use xlink:href='#back2' x='0' y='0' />
</g>
</svg>

当未设置宽度时，它默认为 100%，符号在 100% x 30px 视口中居中。你可以看到，如果我们添加一个代表该框的轮廓。

此处“100%”表示 SVG 宽度的 100%。该值为 300px，这是浏览器为不确定宽度的元素提供的默认宽度。

<svg overflow="visible">
<defs>
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol>
</defs>

<g transform='translate(50,50)'>
<rect height='30' width='30' fill='#DDD' />
<use xlink:href='#backward' height='30' x='0' y='0' />
<rect width="100%" height="30" fill="none" stroke="red" />
</g>

</svg>

<use> svg 路径的位置

Position of <use> svg path

html

svg

position