html - 以百分比形式指定路径标记的 d 属性值

Question

如何使用 path 标记的 d 属性的百分比值？

例如:

<path stroke-width="4" d="M1% 10% l100% 0" />

不起作用。

由于我想在 svg 大小发生变化时重用 svg 标记中的元素，因此我正在寻找绝对值(以百分比表示)。

提前致谢..

Answer 1

SVG 路径数据仅允许无量纲数字、句点。

如果你想改变路径的大小，你可以使用 transform 来实现。属性或通过建立新视口(viewport)。例如，您可以使用 <svg> 包裹您的路径。最外面的元素 <svg> :

<svg ...>
    <svg viewBox="0 0 100 100" x="0" y="10%" width="100%" height="100%">
        <path stroke-width="4" d="M1 10 l100 0" />
    </svg>
</svg>

在那里，您可以将路径坐标定义为绝对值。内在<svg>定义了 viewBox这样路径就可以跨越您想要的数量。然后可以使用 x 进行相对大小和定位, y , width和height属性。

如果您想多次重复使用同一元素，可以使用 <symbol> 执行相同的操作(不会自行渲染的模板)和 <use>引用它的元素:

<svg ...>
    <symbol id="myPath" viewBox="0 0 100 100">
        <path stroke-width="4" d="M1 10 l100 0" />
    </symbol>
    <!-- with relative sizes -->
    <use xlink:href="#myPath" width="100%" height="100%" />
    <!-- with absolute sizes -->
    <use xlink:href="#myPath" width="200" height="160" />
    <!-- using transforms -->
    <use xlink:href="#myPath" transform="translate(50, 0) scale(3.5)" />
</svg>