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>（yay puns！）

Answer 2

您只需在width="30"引用中添加<use>即可。

＆＃13;

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

＆＃13;

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

这里＆＃34; 100％＆＃34;表示SVG宽度的100％。该值为300px，这是浏览器为不确定宽度的元素提供的默认宽度。

＆＃13;

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

＆＃13;

<use> svg路径的位置

2 个答案: