在单个img标签中显示多个svg [英] Show multiple svgs in single img tag

问题描述

我有4个svg.我想将4个svg显示为单个< img> ，这意味着假设图像具有4个相等的部分，第1个部分具有1个svg，而img标签的第二个部分具有2个svg，依此类推上...4 svg ex:

I have 4 svgs. I would like to show 4 svgs as single <img>, which means let's say image has 4 equal parts, the 1st part has 1 svg and the 2nd part of the img tag has 2nd svg and so on... 4 svg ex:

<svg width="488px" height="531px">....</svg>
<svg width="350px" height="455px">....</svg>
<svg width="560px" height="620px">....</svg>
<svg width="395px" height="421px">....</svg>

<img src= SHOULD BE BELOW IMAGE/>

推荐答案

<svg width="500" height="500">

    <image x="20" y="20" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(255,0,0)"/></svg>' />

    <image x="100" y="20" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(255,255,0)"/></svg>' />

    <image x="20" y="100" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(0,255,0)"/></svg>' />

    <image x="100" y="100" width="100" height="100"
        xlink:href='data:image/svg+xml,<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" fill="rgb(0,255,255)"/></svg>' />

</svg>

< image ... xlink:href ='data:image/svg + xml， svg1字符串... />

<image ... xlink:href='data:image/svg+xml,svg1 string.../>

< image ... xlink:href ='data:image/svg + xml， svg2字符串... />

<image ... xlink:href='data:image/svg+xml,svg2 string.../>

...

结果网址: https://stackblitz.com/edit/js-ryh4kb?file = index.html

这篇关于在单个img标签中显示多个svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！