Почему этот код SVG не работает

<!DOCTYPE HTML>
<HTML xmlns="http://www.w3.org/1999/xhtml" >
<HEAD>
<TITLE>Show Svg</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<STYLE>
#viewbox {
    border: 2px solid black;
    }
</STYLE>    

</HEAD>
<BODY>
<SVG id="viewbox"  height="400px" width="400px" viewBox="-20 -20 40 40"
     xmlns="http://www.w3.org/2000/svg"
    >
<g id="pic">
<line x="20px" y="0px"  x2="-20px" y2="0px"  
    style="stroke-width:1;stroke:rgb(0,0,0);" 
    />
<line x="0"   y="40" x2="0"  y2="-20" 
    style="stroke-width:1;stroke:rgb(0,0,0);"  
    />
<rect x="-10" y="-10" width="20" height="20"
    style="stroke-width:1;stroke:rgb(255,0,0)"
    /> 
</g>
</SVG>
</BODY>
</HTML>

Отладчик показывает строки, оканчивающиеся на x = 0, и окно просмотра pic как 30px x 30px, которое усекает линии до краев красного поля.

Так что здесь происходит?

Источник

1 ответ

Строки идут от x1, y1 до x2, y2 не от x, y до x2, y2. Если вы исправите атрибуты, это должно работать.

Обратите внимание, что если вы действительно пишете xhtml (как предполагает ваше пространство имен), то это язык, чувствительный к регистру, и все эти заглавные теги должны быть строчными.

Источник
Другие вопросы по тегам