我想用clipPath
來表示我要在網頁上顯示的圖像,我想用百分比代替絕對點來表示polygon
。我已經嘗試將viewBox
屬性添加到我的svg元素中來實現這一點(這里建議使用支持百分比單位的svg多邊形點),但是當圖像渲染時,看起來絕對點仍在使用。我的html設置如下:
<img class="clip-svg" src="{% static 'myApp/images/random.png' %}">
<div id="svg-container" style="width:100%; height:100%;">
<svg width='100%' height='100%' viewBox="0 0 100 100">
<defs>
<clipPath id="myClip">
<polygon points="89,0 100,50 89,100 71,100 83,50 69,0"/>
<polygon points="53,0 75,50 59,100 48,100 64,50 41,0" />
</clipPath>
</defs>
</svg>
</div>
CSS為:
.clip-svg {
clip-path: url(#myClip);
}
僅僅使用CSSclip-path(沒有svg)我就有:
clip-path: polygon(89% 0, 100% 50%, 89% 100%, 71% 100%, 83% 50%, 69% 0);
clip-path: polygon(53% 0, 75% 50%, 59% 100%, 48% 100%, 64% 50%, 41% 0);
當我使用CSSclip-path
樣式時,剪輯顯示正確,我一次只能顯示一個,我希望同時顯示兩個。我讀過的所有其他類似問題都是說使用我已經做過的viewBox
屬性,所以我不知道出了什么問題。
您可以嘗試使用
clipPathUnits="objectBoundingBox"
作為clipPath。請閱讀clipPathUnits
請注意多邊形有
transform="scale(.01)"
,即1/100。現在值是百分比。另外:用于clipPath的svg元素可以有
width="0" height="0"
,這樣就不會干擾布局。