Question

如何为d代码的path属性使用百分比值？

例如：

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

不起作用。

由于我想重新使用svg标签中的元素来改变svg大小，我正在寻找绝对值（以百分比表示）。

先谢谢...

Answer 1

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

如果要更改路径的大小，您将使用transform属性或通过建立新的视口来执行此操作。例如，您可以在最外面的<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>

以百分比指定路径标记的d属性的值

1 个答案: