带点坐标百分比的SVG多边形

问题描述：

我可以在svg中的矩形坐标中使用百分比值，但不能在多边形中使用百分比值。有没有解决方法？带点坐标百分比的SVG多边形

我的意思是，这是确定：

svg { 
 
    background: #ADF; 
 
    width: 300px; 
 
    height: 300px 
 
} 
 
rect { 
 
    stroke: black; 
 
    fill: #8FF; 
 
}

<svg> 
 
    <rect x="10%" y="10%" width="80%" height="70%"/> 
 
</svg>

但是，这并不工作：

svg { 
 
    background: #ADF; 
 
    width: 300px; 
 
    height: 300px 
 
} 
 
polygon { 
 
    stroke: black; 
 
    fill: #8FF; 
 
}

<svg> 
 
    <polygon points="20%,10% 10%,90% 80%,90%"/> 
 
</svg>

铬抱怨

Error: attribute points: Expected number, "20%,10% 10%,90% 80…".

有没有一种方法可以绘制百分比坐标的填充多边形？

我想混合不缩放的像素值（例如笔划宽度=“1”）与百分比值，但我只能做到这一点与矩形。 – Lynn

答

SVG坐标系由SVG的viewbox定义。

定义您的视框为0 0 100 100并将百分点转换为基于该视框的数字。

然后SVG会自动缩放。

如果你想避免笔画缩放......那里还有一个CSS属性！

svg { 
 
    background: #ADF; 
 
    width: 250px; 
 
    height: 250px 
 
} 
 
polygon { 
 
    stroke: black; 
 
    stroke-width:1; 
 
    fill: #8FF; 
 
    vector-effect: non-scaling-stroke; 
 
}

<svg viewbox=" 0 0 100 100"> 
 
    <polygon points="20,10 10,90 80,90" /> 
 
</svg>

带点坐标百分比的SVG多边形

相关推荐