如何处理内联 SVG 的重复 ID？

Question

我在网页上多次使用相同的 SVG。SVG 使用 PHP 插入服务器端，如下所示：

<?php echo file_get_contents("myimage.svg"); ?>

SVG 包含一个渐变，它应该在 SVG 的不同实例上具有不同的颜色。

服务器交付的 HTML 文档可能类似于以下代码段。相同的 SVG 已插入两次：

#image1 .stop1 { stop-color: #FDF39C }
#image1 .stop2 { stop-color: #FE8A77 }
#image2 .stop1 { stop-color: #64E8EA }
#image2 .stop2 { stop-color: #A79CFC }

<div id="image1">
  <svg width="256" height="256" viewBox="0 0 256 256">
    <defs>
      <linearGradient id="gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="100%"/>
      </linearGradient>
    </defs>
    <circle fill="url(#gradient1)" cx="128" cy="128" r="100" />
  </svg>
</div>
<div id="image2">
  <svg width="256" height="256" viewBox="0 0 256 256">
    <defs>
      <linearGradient id="gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="100%"/>
      </linearGradient>
    </defs>
    <circle fill="url(#gradient1)" cx="128" cy="128" r="100" />
  </svg>
</div>

问题是 SVG 的两个实例都显示了第一个 SVG 中定义的渐变。这是实际结果与预期结果的比较：

这样做的原因是两个内联gradient1SVG的渐变具有相同的 ID ，因为包含该 ID 的同一个 SVG 在服务器上插入了两次。圆元素的填充url(#gradient1)在这两种情况下都设置为，浏览器简单地链接到该 ID 的第一次出现，这是第一个 SVG 中的渐变定义。这种行为是正确的，但就我而言，这是一个问题。

问题是：如何避免重复 ID？我使用SVGInject处理 SVG 注入，这通过使 ID 唯一解决了问题。SVGInject 只是在 ID 的末尾添加一个随机字符串，例如更改gradient1为gradient1-h4w7xo82.

但是，在使用 PHP 插入 SVG 时，我没有看到解决方案。你能帮我吗？

Answer 1

将 svg 文件转换为 php，以便您可以将gradientId参数传递给其中。

<?php
  header('Content-Type: image/svg+xml');

  echo '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
    <defs>
      <linearGradient id="' . $gradientId . '">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="100%"/>
      </linearGradient>
    </defs>
    <circle fill="url(#' . $gradientId . ')" cx="128" cy="128" r="100" />
  </svg>';
?>