php - 如何处理内联 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 中定义的渐变。这是实际结果与预期结果的比较:

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

问题是:如何避免重复 ID？我使用 SVGInject 处理 SVG 注入(inject)，这通过使 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>';
?>