小编Vic*_*kyB的帖子

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

我在网页上多次使用相同的 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 }
Run Code Online (Sandbox Code Playgroud)
<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> …
Run Code Online (Sandbox Code Playgroud)

css php svg

8
推荐指数
1
解决办法
1941
查看次数

标签 统计

css ×1

php ×1

svg ×1