0

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>

次に、<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>

ノート：

  • raphael.js HTML5 ライブラリを使用して 3 つの HTML5 図形を描画し、それらが完全に機能するため、これはブラウザー サポートに関連しているとは思いません。（クロムとファイアフォックスで試しました）
  • ファイルをインクルードしても、正常に機能しません。ブラウザはそれを解析しているようですが、表示されていないようです。
4

1 に答える 1

1

形状の座標は非常に似ているため、ポリゴンは viewBox 領域の非常に小さな部分をカバーしています。

要素の viewBox<svg>を viewBox="448 1977 5 10" に変更すると、可視領域が多角形の座標により厳密に一致するようになり、代わりに多角形が大きくなるため、形状が表示されます。

于 2012-10-02T10:21:44.060 に答える