2

このHTMLコードがあり、JavaScriptコードを呼び出しています。コードはゲージ用です。javascriptコードで、SVGファイルにアクセスし、（ゲージの）針を変更して目的の値を表示しようとしています。コードは正常に機能しています。ただし、HTMLで「オブジェクトID」を呼び出したくありません。HTMLでオブジェクトIDを使用する代わりに、JavaScriptを介してSVGファイルに直接アクセスしたい。el.setAttribute（'data'、'gauge.svg'）;を使用してみました しかし、svg_docはSVG画像を取得して針を変更することができません。どんな助けでも大歓迎です。

PS：私は問題を徹底的に説明するために最善を尽くしました。ただし、どこか不明な点がありましたらお知らせください。

これは、下に貼り付けたsvgコードに埋め込まれているGauge.png画像ですhttps://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g name="gauge" width="122px" height="127px">
        <image xlink:href="gauging.png" width="122" height="127"/>
    <circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none">
        <animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s"
        values="none;#f88;#f00;#f88;none;" repeatCount="0"/>
    </circle>
        <g id="needle" transform="rotate(0,62,62)">
            <circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/>
            <rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/>
            <polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/>
        </g>
        <text id="value" x="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text>
    </g>
</svg>

HTML+Javascriptコード

    <head>
    <title>SVG Gauge example</title>

    <script>
    function update1(){
        var scale=100;
        var value;
        var value1 = 69;

        var el=document.getElementById('gauge1');       
        if (!el) return;

        /* Get SVG document from HTML element */
        var svg_doc = el.contentDocument;
        if (!svg_doc) return;


        /* Rotate needle to display given value */
        var needle_el = svg_doc.getElementById('needle');
        if (!needle_el) return;
        /* Calc rotation angle (0->0%, 260->100%) */
        value = parseInt(value1);
        scale = parseInt(scale);
        if (value > scale) value = scale;
        var angle = value / scale * 260;
        /* On-the-fly SVG transform */
        needle_el.setAttribute('transform','rotate('+angle+',62,62)');
    }
document.addEventListener('load', update1, true);
    </script>

    </head>

<div>
<object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/>
</div>


</html>
4

1 に答える 1

2

robertcがすでに述べたように、JavaScriptコードをSVGファイルに埋め込むことができます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g name="gauge" width="122px" height="127px">
        <image xlink:href="gauging.png" width="122" height="127"/>
    <circle id="led" cx="39" cy="76" r="5" style="fill: #999; stroke: none">
        <animateColor id="ledAnimation" attributeName="fill" attributeType="css" begin="0s" dur="1s"
        values="none;#f88;#f00;#f88;none;" repeatCount="0"/>
    </circle>
        <g id="needle" transform="rotate(0,62,62)">
            <circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/>
            <rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/>
            <polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/>
        </g>
        <text id="value" x="51" y="98" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text>
    </g>

    <script type="text/javascript">
        var scale=100;
        var value;
        var value1 = 69;

        /* Rotate needle to display given value */
        var needle_el = document.getElementById('needle');
        /* Calc rotation angle (0->0%, 260->100%) */
        value = parseInt(value1);
        scale = parseInt(scale);
        if (value > scale) value = scale;
        var angle = value / scale * 260;
        /* On-the-fly SVG transform */
        needle_el.setAttribute('transform','rotate('+angle+',62,62)');

    </script>
</svg>

スクリプトの実行時にドキュメントが既に読み込まれるように、実際のSVGコンテンツの下にコードを配置しました。

次に、FirefoxなどでSVGファイルを直接表示できます（私は今それをテストしました）。

于 2012-07-31T20:13:02.453 に答える