Question

<!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，截断红色框边缘的线条。

那么这里发生了什么？

Answer 1

线从x1，y1到x2，y2不是从x，y到x2，y2。如果你纠正了它应该起作用的属性。

请注意，如果您真的在编写xhtml（正如您的命名空间所示），那么这是一种区分大小写的语言，所有这些大写标记都需要小写。

为什么这个svg代码不起作用

1 个答案: