Как обрабатывать дубликаты идентификаторов для встроенных SVG?

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 имеют одинаковый идентификатор gradient1, поскольку один и тот же SVG, содержащий этот идентификатор, дважды вставляется на сервер.Заполнение элементов круга установлено в url(#gradient1) в обоих случаях, которые браузер просто ссылается на первое вхождение этого идентификатора, которое является определением градиента в первом SVG.Это правильное поведение, но в моем случае это проблема.

Вопрос: как избежать дублирования идентификаторов?Я работал с SVG-инъекцией, используя SVGInject , и это решило проблему, сделав идентификаторы уникальными.SVGInject просто добавляет случайную строку в конец идентификаторов, например, изменяя gradient1 на gradient1-h4w7xo82.

Однако я не вижу решения при вставке SVG с PHP.Вы можете помочь?

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>';
?>