使用絕對點而不是百分比的svg clipPath

我想用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。

這表明<clipPath>元素內的所有坐標都相對于應用剪切路徑的元素的邊界框。這意味著坐標系的原點是對象邊界框的左上角,對象邊界框的寬度和高度被視為具有1個單位值的長度。

請閱讀clipPathUnits

請注意多邊形有transform="scale(.01)",即1/100。現在值是百分比。

.clip-svg {
  clip-path: url(#myClip);
}

img{width:95vw;}
<img class="clip-svg" src="https://assets.codepen.io/222579/castell.jpg" />

<svg viewBox="0 0 100 100" width="0" height="0">

  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <polygon transform="scale(.01)" points="89,0 100,50 89,100 71,100 83,50 69,0" />
    <polygon transform="scale(.01)" points="53,0 75,50 59,100 48,100 64,50 41,0" />
  </clipPath>
</svg>

另外:用于clipPath的svg元素可以有width="0" height="0",這樣就不會干擾布局。

主站蜘蛛池模板: 日本高清一区二区三区| 国产精品揄拍一区二区| 日本一区二区三区在线看 | 视频在线观看一区| 相泽南亚洲一区二区在线播放| 制服丝袜一区二区三区| 中文字幕精品一区二区2021年| 熟女性饥渴一区二区三区| 亚洲国产日韩在线一区| 国产精品视频一区国模私拍| 国语对白一区二区三区| 国产精品一区在线观看你懂的| 亚洲精品色播一区二区| 福利片免费一区二区三区| 国产一区二区三区乱码| 深夜福利一区二区| 动漫精品第一区二区三区| 深夜福利一区二区| 色天使亚洲综合一区二区| 日韩精品区一区二区三VR| 亚洲综合国产一区二区三区| 国产成人一区二区三区电影网站 | 一本一道波多野结衣一区| 国产在线精品一区二区夜色| 久久久国产一区二区三区| 日韩免费一区二区三区| 国产成人高清亚洲一区久久| 日韩三级一区二区| 国产在线精品一区在线观看| 韩国一区二区三区| 久99精品视频在线观看婷亚洲片国产一区一级在线 | 国产乱人伦精品一区二区| 日韩一区精品视频一区二区| 国内国外日产一区二区| 亚洲AV无一区二区三区久久| 色妞色视频一区二区三区四区 | 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 欲色aV无码一区二区人妻 | 亚洲性色精品一区二区在线| 偷拍激情视频一区二区三区| 色窝窝免费一区二区三区|