Question

我正在处理SVG文件中xml元素的高度和宽度。似乎唯一的方法是改变高度和宽度属性。这是因为CSS＆amp; XML元素无法识别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属性，例如颜色，高度，宽度，但其他是属性，例如

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

这里的值是一个属性，如果你使用的是jquery，你可以通过调用attr（“value”）得到它

同样，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";

是否有XML对象所尊重的高度或宽度的DOM或CSS属性

1 个答案: