有没有办法将 HTML5 中 SVG 标签的数字属性作为简单的数学表达式,例如以下 HTML5 代码中圆心坐标的数学表达式。
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="10+50" cy="20+50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
您可以在
SVG 规范的属性索引中读到cx
和cy
的可接受值是坐标。按照该文档中的超链接,您可以读到坐标lengths
:
<长度>:长度是距离测量值。<长度的格式> 是一个<数字>可以选择紧跟单位标识符。数字>长度的格式>长度>
这意味着 svg 不支持您要执行的操作。
你可能想使用 javascript 来动态计算你的坐标,并在 svg 中设置它们。
一些库使得在javascript中操作svg变得更加容易,其中之一是snap.svg。