Javascript AI生成的SVG在包含后不显示_Javascript_Html_Svg_Shapes

Javascript AI生成的SVG在包含后不显示

javascript html svg

Javascript AI生成的SVG在包含后不显示,javascript,html,svg,shapes,Javascript,Html,Svg,Shapes,我有一个使用Adobe Illustrator生成的.svg文件。以下是SVG文件的结构： <?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://

我有一个使用Adobe Illustrator生成的.svg文件。以下是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>

然后我使用

标记将它包括在我的.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>


我的演示

注:

我认为这与浏览器支持无关，因为我已经使用raphael.js HTML5库绘制了3个HTML5形状，它们工作得非常好。（在chrome和firefox上试用）
包含该文件并不能正常工作。浏览器似乎在解析它，但似乎没有显示它

形状中的坐标非常相似，因此多边形覆盖了视口区域的一小部分

如果将

元素的viewBox更改为viewBox=“448 1977 5 10”，则形状将显示为可见区域现在与多边形坐标更加匹配，或者将多边形变大。

您正在使用的浏览器？确定。。现在它似乎显示右上角。。但我不明白你是怎么想的。。因为我知道width=“1068px”height=“1671.49px”，所以如何显示所有SVG。。为什么viewBox=“0 0 1068 1671”不显示任何内容。。因为它从右上角开始并显示所有需要的内容，因为viewBox覆盖了一个很大的区域，并且该区域内的多边形大小小于一个像素。如果您使viewBox覆盖的区域刚好大于多边形，您将看到该形状。谢谢。。那么，AdobeIllustrator的出口流程似乎是错误的。。关于这个过程有什么想法吗。。如果我选择save for web并取消选中“Clip for Artboard”选项。。它在生成的图像中正常工作。。但在保存为svg时，我没有这样的选项