javascript - 是否存在 XML 对象遵循的高度或宽度的 DOM 或 CSS 属性

Question

我正在处理 SVG 文件中 xml 元素的高度和宽度。似乎唯一的方法就是改变高度和宽度属性。这是因为 XML 元素无法识别 CSS 和 DOM 属性。

是否有可以使用 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>

Answer 1

SVG 中的一些东西被建模为 attributes , 其他东西建模为 CSS properties . HTML 是一样的，HTML 中的很多东西都是 CSS 属性，例如color, height, width 但其他都是属性，例如

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

这里的 value 是一个属性，如果你使用的是 jquery，你可以通过调用 attr("value") 来获取它

同样，SVG 有时会使用 CSS 属性，例如

<rect style="fill: blue"/>

混淆的一个来源是 SVG 通常将 CSS 属性映射到属性，以便您可以使用属性设置语法设置 CSS 属性，例如

<rect fill="blue"/>

此处设置 fill 属性实际上设置了 fill CSS 属性。

高度和宽度在 SVG 中通常是属性，但在 HTML 中是样式。 jquery 假设 height 是一个 CSS 属性，从它的 Angular 来看这是合理的，因为它是为了使操作 HTML 更容易而编写的，但这意味着它不能很好地与 SVG 一起工作。

属性和 CSS 属性都可以通过 javascript 更改 getAttribute获取属性和 setAttribute设置它。不过，您通常不能使用 CSS 来操作属于属性的内容。

您可以通过 javascript 调用 element.style.property 来更改 CSS，例如

element.style.fill="blue";