0

我正在处理 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>
4

1 回答 1

1

SVG 中的一些东西被建模为属性，其他东西被建模为CSS 属性。HTML 是一样的，HTML 中的很多东西都是 CSS 属性，例如颜色、高度、宽度，但其他的是属性，例如

<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"/>

这里设置填充属性实际上设置了填充 CSS 属性。

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

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

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

element.style.fill="blue";
于 2013-05-20T16:16:25.487 回答