HTML5 中 SVG 标签的数字属性作为数学表达式,如 <circle cx= "10+50" cy= "20+50" r= "40" />



有没有办法将 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 规范的属性索引中读到cxcy的可接受值是坐标。按照该文档中的超链接,您可以读到坐标lengths

<长度>:长度是距离测量值。<长度的格式> 是一个<数字>可以选择紧跟单位标识符。

这意味着 svg 不支持您要执行的操作。

你可能想使用 javascript 来动态计算你的坐标,并在 svg 中设置它们。

一些库使得在javascript中操作svg变得更加容易,其中之一是snap.svg。

相关内容

最新更新