Question

我正在尝试创建一个基本高度为100px的SVG。但不确定是否正确。我没有得到所需的确切输出。下面是代码示例

<svg id="triangle" viewBox="0 0 100 100">
        	<polygon points="50 15, 100 100, 0 100"/>
      </svg>

请纠正我在哪里做错了。非常感谢您的帮助。

谢谢！

Answer 1

包装在容器中，然后将大小设置为百分比。这样就可以调整大小，并且形状可以自适应。

.container {
width:30%;
height:30%;
}

<div class="container">
        <svg id="triangle" viewBox="0 0 100 100">
            	<polygon points="50 15, 100 100, 0 100"/>
        </svg>
     </div>

不使用容器的第二个选项：

 <svg id="triangle" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="30%" height="30%" viewBox="0 0 100 100">
                	<polygon points="50 15, 100 100, 0 100"/>
 </svg>

第三种选择

按照规范polygon

编写语法

逗号必须分隔坐标“ X”和“ Y”

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 100 100" style="border:1px solid gray;" >   
	
	<polygon points="50, 13.397 100, 100 0, 100"/>
</svg>

更新

回复评论

编译器仍然给我一个错误，它不是有效的三角形。

要验证文件，我添加了必需的参数

<!DOCTYPE html>
<head> 
<title>Triangle</title>
</head> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 100 100"  >   
	
	<polygon points="50, 13.397 100, 100 0, 100/>    
</svg>

将此文件下载到验证器https://validator.nu/

在HTML中使用SVG创建底边高度为100px的等边三角形

1 个答案: