2012-09-12 60 views
0

我有一个svg代码,我想将其转换为<img>。任何想法如何做到这一点?SVG xml到图像

<svg xmlns="http://www.w3.org/2000/svg" width="58" height="308"> 
    <foreignObject width="100%" height="100%"> 
     <h3 style="padding:0;margin:0;text-align:center;font-size:16px;">Legend</h3> 
     <ul style="position: relative; font-size: 12px; list-style-type: none; margin-left: 20px; min-width: 15px; "> 
      <li style="position:absolute;top:17.5px">1</li> 
      <li style="position:absolute;top:43.5px">0</li> 
      <li style="position:absolute;top:66.5px">0</li> 
      <li style="position:absolute;top:90.5px">0</li> 
      <li style="position:absolute;top:113.5px">0</li> 
      <li style="position:absolute;top:136.5px">0</li> 
      <li style="position:absolute;top:159.5px">0</li> 
      <li style="position:absolute;top:183.5px">0</li> 
      <li style="position:absolute;top:206.5px">0</li> 
      <li style="position:absolute;top:229.5px">0</li> 
      <li style="position:absolute;top:253.5px">0</li> 
     </ul> 
     <div style="position: relative; display: block; width: 15px; height: 256px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAEACAYAAABs9ywrAAAC7klEQVRoQ+3bW0iUQRTA8bOJJSammGilYpKJiWJuJJHRIhUaRZikoGGBRSxFiVgRXTYqugihEYmVhN2ITUS8sIgspYaUlImgJVJJSmgXzCgJw/ySEh/CxTj/p2CHGeZlfhw4zPcxDHNMItI4OSamP832u8/cTBNLTk6OqdWGSYyZqcj02IPg2QR7EexNsA/B8wj2JziA4ECCgwheSHAIwWEEhxMcQXAkwVEERxMcQ3AcwfEEJxC8guCVBK8ieDXBawheS3AywesI3kBwCsEbCd5E8BaC0whOJ3gbwZkEZxG8neAcgncSnEvwboL3EGwleC/B+wnOIzif4AKCDxN8hOCjBB8HeNxG8CmCzxB8luDzBBcSfJHgIoIvEXyZ4BKCSwm+RnAZwTcILif4NsF3Cb5HsJ3gCoIrCa4iuBpgo45gB8H1BDcQ7CT4AcGNBDcT3ELwY4JbCX5KcBvB7QR3ENxJ8AuCuwnuIfg1wb0EvyW4n+B3BA8S/IHgTwQPETxM8FeCRwj+TvAowWMEjwP8wwD4C8GDBPcS/JLg5wS3EOwkuJbg+wTfJLiU4GKCzxF8guCDBO8jOJfgLILTCE4l2EJwIsFmw1P/PMJs+BG8iOClBC8nOIngFILTCc4h2EpwAcE2ggsJvkJwOcEVBDsIbiK4jeBugvsJHiJ4FOAxA+ARgj8T/J7gPoJfEdxFcDvBrQQ3E+wk2EFwFcF2gm8RXEZwCcFFBF8g+DTBxwg+RPABgq0E7yJ4B8HZBGcQvJXgzQSnEryeYAvBSQQnEmwmOI7gZQRHEryY4FCCgwmeT7AfwXMJnkPwLIAT5Kf+yBwv4LAeK9/0kWNkWI+j5aMeR8mAHi+RPj2OkDd6HC49ehwmXXocIh16vECe6XGQPNHjQHmkxwHyUI/9pUGPfQXcVvhIjT6yt1TqsZfY9dhT7uixh4CLJZNc10cWuerGLgoJp60ddCfMddmlO2FTuXF/Va62yX+8SSx/lzD/68/gFwryaXEkBvE8AAAAAElFTkSuQmCC); "></div> 
    </foreignObject> 
</svg> 
+0

的http://计算器.com/questions/1019462/how-to-convert-svg-files-to-other-image-formats – j0nes

+0

难道你不能仅仅在''上添加你的SVG文件作为'src'吗? – robertc

回答

0

这种转换不能在XML或HTML中执行。问题不在于标记代码,而是您需要将一种媒体转换为另一种媒体。此外,您正在将基于文本的格式更改为基于二进制(BLOB)的格式。您需要SVG的代码保存下来到XML兼容SVG文件,然后使用一些在线图像转换应用,如: