Question

我在显示SVG矩形网格时遇到问题，只显示我的html文件中列出的第一个矩形。

我改变了第一个和坐标的宽度和高度。缩放/移动的矩形就好了。

<body>
<section align="CENTER">
<svg width=250 height=250>
    <rect width=50 height=50 x=0 y=0/>
    <rect width=50 height=50 x=50 y=0/>
    <rect width=50 height=50 x=100 y=0/>
    <rect width=50 height=50 x=150 y=0/>
    <rect width=50 height=50 x=200 y=0/>
    <rect width=50 height=50 x=0 y=50/>
    <rect width=50 height=50 x=50 y=50/>
    <rect width=50 height=50 x=100 y=50/>
    <rect width=50 height=50 x=150 y=50/>
    <rect width=50 height=50 x=200 y=50/>   
    <rect width=50 height=50 x=0 y=100/>
    <rect width=50 height=50 x=50 y=100/>
    <rect width=50 height=50 x=100 y=100/>
    <rect width=50 height=50 x=150 y=100/>
    <rect width=50 height=50 x=200 y=100/>  
    <rect width=50 height=50 x=0 y=150/>
    <rect width=50 height=50 x=50 y=150/>
    <rect width=50 height=50 x=100 y=150/>
    <rect width=50 height=50 x=150 y=150/>
    <rect width=50 height=50 x=200 y=150/>
    <rect width=50 height=50 x=0 y=200/>
    <rect width=50 height=50 x=50 y=200/>
    <rect width=50 height=50 x=100 y=200/>
    <rect width=50 height=50 x=150 y=200/>
    <rect width=50 height=50 x=200 y=200/>
</svg>
</section>
</body>

Answer 1

0/被解析为属性值，因此第一个<rect标记被解析为

  <rect width="50" height="50" x="0" y="0/">

而不是

  <rect width="50" height="50" x="0" y="0" />

如你所愿。当浏览器（在我的情况下为Firefox）读取此内容时，它会看到<rect>没有关闭标记。 svg中的后续<rect>被解析为在第一个中，它什么都不做。

引用xml属性的值，或者像我在this jsfiddle example中所做的那样在斜杠前放置一个空格。

只有某些svg矩形在浏览器中绘制

1 个答案: