1
我有這個HTML代碼，這是調用我的JavaScript代碼。代碼是用於量表。在javascript代碼中，我試圖訪問一個SVG文件，並修改指針（指針）來顯示所需的值。代碼工作正常。但是，我不想在HTML中調用「對象ID」。我想直接通過JavaScript訪問SVG文件，而不是在HTML中使用對象ID。我嘗試使用el.setAttribute（'data'，'gauge.svg'）;但是，然後svg_doc無法檢索SVG圖像並修改針。任何幫助將不勝感激。 PS：我盡最大努力解釋問題。但是，如果我在某個地方不清楚，請告訴我。直接從Javascript代碼訪問SVG文件
這是嵌入在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)');
}
document.addEventListener('load', update1, true);
</script>
</head>
<div>
<object id="gauge1" type="image/svg+xml" data="gauge.svg" width="127" height="122"/>
</div>
</html>
我不確定爲什麼你會因爲這種現行的方法而感到不高興，這就是你如何去做的。我不知道「object id」是什麼意思？如果您不希望涉及任何HTML，請將JS直接放入SVG中。 – robertc 2012-07-30 22:18:37
如果你看看html代碼，你會看到我使用「gauge1」作爲引用我的主圖像「gauge.svg」的對象id。沒有什麼比我更生氣了，我可以很詳細地解釋你在我的項目中使用html對象id參數的含義。無論如何，任何解決我的問題的反饋將不勝感激。 – 2012-07-30 22:28:54
這不是問題，這是它應該如何工作，沒有什麼可以「解決」。如果你有一些特殊要求意味着你不能這樣做，那麼你最好在你的問題中陳述這些要求。 – robertc 2012-07-31 00:05:11