我在网页上多次使用相同的 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)