帶點座標百分比的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…".

有沒有一種方法可以繪製百分比座標的填充多邊形？

來源

2016-08-17 Lynn

我想混合不縮放的像素值（例如筆劃寬度=「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>

來源

2016-08-17 16:12:37

帶點座標百分比的SVG多邊形

回答

相關問題