Question

这是我的html文档：

<!DOCTYPE html>
<html xmlns = "http://www.TedTheSpeedlearner.com"
      xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation = "http://www.TedTheSpeedlearner.com SVG_Red_Circle.xsd">
<head>
<title>SVG Line</title>
<link rel = "stylesheet" type = "text/css" href = "SVG_Lines.css">
</link>
</head>
<body>
<svg id = "Image_Box">
<line id = "My_Line">
</line>
</svg>
</body>
</html>

这是我的css文件：

#Image_Box {
height: 500px;
width: 800px;}
#My_Line {
x1: 100px;
y1: 40px;
x2: 200px;
y2: 90px;
stroke: red;
stroke-width: 3;}

当我在Google Chrome中打开我的html文档时，该行不会显示。我不知道为什么。你能帮助我吗？

Answer 1

x1, x2, y1, y2不是CSS元素，而是<line>元素的属性。

此外，您应将line标记放在svg标记内。

<svg id = "Image_Box">
  <line id = "My_Line" x1="0" y1="0" x2="200" y2="200" />
</svg>

使用外部CSS样式表来设置SVG行的样式

1 个答案: