2012-10-02 18 views
0

我有一个使用Adobe Illustrator生成的.svg文件。这是SVG文件的结构:由AI生成的SVG未包含后显示

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="1068px" height="1671.49px" viewBox="0 0 1068 1671.49" enable-background="new 0 0 1068 1671.49" xml:space="preserve"> 
<g> 
    <polygon fill="#C6C6C6" points="451.07,1979.34 451.07,1979.34 450.8,1979.17 448.72,1978.82 448.6,1978.71 448.34,1978.59 
     447.71,1978.36 448.01,1978.33 450.2,1978.3 452.53,1978.76 451.35,1979.08 451.73,1979.29  "/> 
<!-- more polygon shapes --> 
</g> 
</svg> 

然后我包括使用<embed>标签像这样在我的.html文件吧。 HTML文件的结构:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My Demo</title> 
     <link rel="stylesheet" href="css/style.css" /> 

     <script src="js/jquery-1.8.2.min.js"></script> 
     <script src="js/raphael-min.js"></script> 
     <script src="js/script.js"></script> 

    </head> 
    <body> 
     <div id="shape1"></div> 
     <div id="shape2"></div>   
     <div id="shape3"></div> 
     <div id="embed_svg"> 
      <embed src="my_svg_file.svg" type="image/svg+xml" /> 
     </div> 
    </body>  
</html> 

注:

  • 我不认为这是相关的浏览器的支持,因为我画用HTML5 raphael.js库3点HTML5的形状和他们很好地工作。 (在Chrome和Firefox上试过)
  • 包括文件不能正常工作。浏览器似乎解析它,但它似乎并没有显示它。
+0

你正在测试什么浏览器? – Giona

+0

@GionaF铬和火狐 –

回答

1

您的形状中的坐标非常相似,所以多边形覆盖了viewBox区域的非常小的一部分。

如果您将<svg>元素的viewBox更改为viewBox =“448 1977 5 10”,则形状将显示为现在可见区域与多边形坐标更接近匹配,或者使多边形更大。

+0

好吧..现在它似乎显示右上角..但我无法弄清楚你是如何看待这件事情..我如何使显示所有的SVG,因为我知道width =“1068px”height =“1671.49px”..为什么viewBox =“0 0 1068 1671”不显示任何东西..因为它从右上角开始显示所有需要的 –

+0

,因为viewBox覆盖大面积,并且该区域内的多边形尺寸小于一个像素。如果您将viewBox覆盖的区域大于多边形的大小,您将看到该形状。 –

+0

谢谢..那么它似乎从AdobeIllustrator出口过程是错误的..任何ideeas在这个过程..如果我选择保存为网络,我取消选择'剪贴画'选项..它工作正常生成的图像..但我没有这样的选择,当保存为svg –