Question

我正在使用以下linearGradient元素：

<linearGradient
   inkscape:collect="always"
   xlink:href="#linearGradient8704"
   id="linearGradient8774"
   gradientUnits="userSpaceOnUse"
   x1="45%"
   y1="45%"
   x2="55%"
   y2="55%" />

是否有可能以某种方式在x / y坐标中使用基本表达式？我希望能够做到这样的事情：

x1="50% - 20px",
y1="50% - 20px",

Answer 1

您必须这样做的具体原因是什么？不要减损你原来的问题，但我内心的编码器尖叫说使用不同单位的表达是错误的。是否可以使用javascript将其中一个值转换为其他单位？类似的东西：

 var new_x1 = (window.innerWidth/2) + 20;
 document.getElementById('linearGradient8774').setAttribute('x1', new_x1 + 'px');

Answer 2

将来可能会在表示属性中使用calc（）表达式（如CSS中所定义），但它还不是任何svg规范的一部分，而AFAIK目前还没有实现支持它的实现。< / p>

如果您使用内联svg和javascript计算所需的值，然后使用CSS将svgs放置在您需要的位置，那么您可能能够正常工作。

linearGradient坐标的SVG表达式

2 个答案: