XML SVG：使矩形的坐标动态

Posted 2023-03-28

【中文标题】XML SVG：使矩形的坐标动态

【英文标题】：XML SVG : Make coordinates of a Rect dynamic

【发布时间】：2022-01-14 04:07:24

【问题描述】：

我正在创建自定义动态 SVG，我希望将矩形元素的 X 和 Y 属性设为动态，如下所示：

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 110 40">
  <defs>
    <ref id="abs" param="abs" default="5"/>
    <ref id="ord" param="ord" default="5"/>
  </defs>
  <g>
    <rect x="url(#abs)" y="url(#ord)"   fill="purple"/>
  </g>
  <script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"/>
</svg>

我正在使用该代码将我的 SVG 调用到网页中：

  <object type="image/svg+xml" data="bidule.svg?abs=0&ord=0" id="svg"></object>

但是我遇到了 X 和 Y 道具的问题，当我在 chrome 上加载它时，会触发以下错误：<rect> attribute x: Expected length, "url(#abs)"

注意：我知道如何在 JS SVG 中做到这一点，但我必须在“原生”SVG 中做到这一点，因为它将被嵌入。

这样做的正确方法是什么？

【问题讨论】：

你得到的错误只是属性 x 和 y 的值只能是 |<rect> - SVG: Scalable Vector Graphics | MDN。您包含在 SVG 中的脚本正在替换错误发生后的值（至少这是意图）。

你是从网络服务器运行这个吗？我刚刚测试了你的代码，它工作正常。

【参考方案1】：

我不知道这是否对你有帮助。但是你可以对 CSS 变量做类似的事情。

这不适用于 <object>，因此您可能需要在页面上内联 SVG。

svg rect 
  --abs: 25px;
  --ord: 10px;

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 110 40">
  <style>
    :root 
      --abs: 5px;
      --ord: 5px;
    
    rect 
      x: var(--abs);
      y: var(--ord);
  </style>
  <g>
    <rect   fill="purple"/>
  </g>
</svg>