1

我有这个 HTML 代码，它正在调用我的 javascript 代码。该代码用于量规。在 javascript 代码中，我试图访问一个 SVG 文件，并修改指针（仪表的）以显示所需的值。代码工作正常。但是，我不想调用 onload(); 和 HTML 中的“对象 ID”。我只想在我的 HTML 文件加载后立即自动调用 javascript。我不想在 html 中调用任何东西（没有对象 id，没有 onload 函数），除了正文标签中的标题。我尝试了各种 onload() 方法，也尝试了这个链接 http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317 但无法实现。任何帮助将不胜感激。

PS：我尽力在解释问题时尽可能彻底。但是，如果我不清楚某处，请告诉我。

这是 Gauge.png 图像，它嵌入在我粘贴在下面的 svg 代码中 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)');
}
</script>

</head>
<body onload="update1(); ">
<div>
<object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/>
</div>
</body>    

</html>
4

1 回答 1

1

要避免该onload属性，您可以使用load事件：

<script type="text/javascript">
    function update1() {
        // ...
    }

    document.addEventListener('load', update1, true);
</script>
于 2012-07-30T20:53:56.407 回答