Question

我试图在一个空白网页中嵌入一组SVG图像。

<html><head></head>
<body>
<img  width="117px" src="img/icone/phone_hex034F84.svg" alt="image">
<img  width="320px" src="img/illustrazioni/SHIPPER3.svg" alt="image">
</body>
</html>

这两个文件都是由Illustrator生成的自包含svg。

第一个在浏览器中渲染时第二个（SHIPPER3.svg）没有。

请参阅代码：http://104.155.112.173/land/img/illustrazioni/SHIPPER3.svg

您可以从上一个链接下载完整的源代码，因为我无法将其嵌入到问题中（太大）。虽然，我只是在这里嵌入序言。

＆＃13;

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="_x5B_SHIPPER1_x5D_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" viewBox="0 0 733.3 587.8" style="enable-background:new 0 0 733.3 587.8;" xml:space="preserve">
<style type="text/css">
    .st0{clip-path:url(#SVGID_2_);}
    .st1{fill:#EDEDED;}
    .st2{fill:#F2F2F2;}

＆＃13;

如果我在http://www.freecodeformat.com/svg-editor.php中复制并粘贴SHIPPER3.svg，它会渲染。我也可以在Sketch中打开它，没有任何问题。

我试图将SHIPPER3.svg也嵌入到内联svg中，但是同样没有显示。

我缺少什么？

Answer 1

SHIPPER3.svg中的几个问题：

您的所有顶级群组都有st0个等级，据说被整个viewBox
clipPath #SVGID_2_有style="display:none;"隐藏它的内容

请参阅：

<svg version="1.1" viewBox="0 0 733.3 587.8">
<style type="text/css">
    .st0{clip-path:url(#SVGID_2_);}
    /* ... */
</style>
<defs>
    <ellipse id="SVGID_1_" cx="1085.6" cy="279.3" rx="251.8" ry="233.4"/>
</defs>
<clipPath id="SVGID_2_">
    <use xlink:href="#SVGID_1_"  style="display:none;overflow:visible;"/>
</clipPath>
<g class="st0">
 <!-- ... -->
</g>
</svg>

Answer 2

除了上面留下的评论之外，您可能希望将<clippath id='SVGID_2_'元素替换为以下内容：

<clipPath xmlns="http://www.w3.org/2000/svg" id="SVGID_2_">
    <ellipse xmlns="http://www.w3.org/2000/svg" id="SVGID_1_" cx="360" cy="290" rx="325" ry="260"/>
</clipPath>

这有两件事。（0）它通过直接插入其中的数据来删除指向SVGID_1_元素的链接。（1）重新定位和调整椭圆的大小

嵌入在网页中的SVG图像无法显示

2 个答案: