XML對象是否有高度或寬度的DOM或CSS屬性

我正在操作SVG文件中xml元素的高度和寬度。似乎唯一的方法就是改變高度和寬度屬性。這是因爲XML元素無法識別DOM屬性。XML對象是否有高度或寬度的DOM或CSS屬性

是否有可以使用Javascript/CSS編寫腳本/樣式的XML元素的高度和寬度屬性？

編輯：http://jsfiddle.net/David_Knowles/ZYhSm/

<svg> 
<!-- shortend --> 
<g id="v-bars"> 
    <rect class="light" x="67" y="0" width="59.858" height="309.522"/> 
    <rect class="dark" x="135.021" y="0" width="59.858" height="276.484"/> 
    <rect class="light" x="203.041" y="0" width="59.857" height="227.168"/> 
    <rect class="dark" x="271.061" y="0" width="59.858" height="201.097"/> 
    <rect class="light" x="339.082" y="0" width="59.857" height="140.743"/> 
    <rect class="dark" x="407.102" y="0" width="59.857" height="295.851"/> 
    <rect class="light" x="475.121" y="0" width="59.859" height="321.301"/> 
    <rect class="dark" x="543.143" y="0" width="59.857" height="165.981"/> 
</g> 
</svg>

來源

2013-05-20 Timidfriendly

CSS當然與SVG XML兼容。你如何處理SVG圖像？ – BoltClock

當然CSS是兼容的，但重要的是要知道並非所有的CSS都是。我正在使用內聯svg。新增示例。 – Timidfriendly

在SVG有些東西被建模爲attributes，其他的事情被建模爲CSS properties。 HTML是一樣的，HTML中的很多東西都是CSS屬性，例如顏色，高度，寬度，但其他屬性是例如

<select> 
    <option value="car">Car</option> 
    <option value="van">Van</option> 
</select>

這裏值是一個屬性，如果你使用jQuery你會通過調用ATTR（「值」）

同樣SVG使用CSS屬性有時例如得到它混亂的

<rect style="fill: blue"/>

一個來源是SVG經常CSS屬性映射到屬性，以便可以使用該屬性設定語法例如設置CSS屬性

<rect fill="blue"/>

在這裏設置fill屬性實際上設置了填充CSS屬性。

高度和寬度通常是SVG中的屬性，但是HTML中的樣式。 jquery假定height是一個CSS屬性，從它的觀點來看它是合理的，因爲它是爲了更容易操作HTML而編寫的，但這意味着它不適用於SVG。

可以通過javascript更改屬性和CSS屬性getAttribute獲取屬性，setAttribute設置它。儘管如此，你通常不能操縱那些使用CSS的屬性。

您可以通過調用element.style.property來通過javascript更改CSS，例如

element.style.fill="blue";

來源

2013-05-20 16:16:25

Thx爲所有偉大的信息。然而，我會堅持最後一點; element.style.fill指的是顏色的分配而不是它的高度。你不能用fill來設置高度，或者確實用style.height來設置高度:-) – Timidfriendly

糟糕我原本打算使用高度，但是那樣會只是HTML的例子。我已更正示例以將填充設置爲有效顏色。 –

XML對象是否有高度或寬度的DOM或CSS屬性

回答

相關問題