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

【问题标题】：specifying values for d attribute of path tag in percentage以百分比指定路径标记的 d 属性值
【发布时间】：2018-02-18 17:25:00
【问题描述】：

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

例如：

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

不工作。

由于我想在 svg 大小变化时重用 svg 标记中的元素，所以我正在寻找绝对值（以百分比表示）。

提前谢谢..

【问题讨论】：

标签： html svg path

【解决方案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>

【讨论】：

如果我有
viewBox 定义的框内的任何内容都适合<svg>s 的宽度和高度 - 无论您为后面的值使用什么单位。