<svg width="192" height="192" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="image1" x="0" y="0" patternUnits="userSpaceOnUse" height="192" width="192">
<image x="0" y="0" width="192" height="192" xlink:href="/url1"></image>
</pattern>
<pattern id="image2" x="0" y="0" patternUnits="userSpaceOnUse" height="192" width="192">
<image x="0" y="0" width="192" height="192" xlink:href="/url2"></image>
</pattern>
</defs>
<path d="m0,0 l0,192 l192,-192 z" fill="url(#image1)" />
<path d="M192,0 l-192,192 l192,0 z" fill="url(#image2)" />
</svg>
Run Code Online (Sandbox Code Playgroud)
在上面的例子中,我使用了 id#image1并#image2让路径引用模式。这一次使用没问题,但如果我要在文档的其他地方重复这个 html,所有的路径都将引用具有给定 id 的最后一个模式。如何使用 SVG 图案/图像填充路径而不为图案分配 ID?
编辑:希望得到一些帮助以更有效地超越 svg 块。我是 SVG 的新手。
| 归档时间: |
|
| 查看次数: |
1467 次 |
| 最近记录: |