SVG clipPath配置viewBox后polygon百分比坐标失效问题排查

仅给SVG根元素配置viewBox无法让clipPath按百分比坐标计算，核心是缺少clipPathUnits属性配置：默认状态下clipPath使用userSpaceOnUse单位，即按绝对像素坐标计算，不会自动适配被裁剪元素的尺寸。

• 给<clipPath>标签添加clipPathUnits="objectBoundingBox"属性，该属性会让裁剪路径的坐标系统相对于被裁剪元素的边界框计算，坐标取值范围0~1对应元素宽高的0%~100%，刚好实现百分比坐标的效果。
• 将原有polygon的points坐标值全部除以100，适配0~1的坐标取值范围。
• 用于定义裁剪路径的SVG不需要占满页面宽高，可以直接设为宽高0做隐藏处理，不占用布局空间。

HTML部分 #

<img class="clip-svg" src="{% static 'myApp/images/random.png' %}">

<svg width="0" height="0" viewBox="0 0 1 1">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <polygon points="0.89,0 1,0.5 0.89,1 0.71,1 0.83,0.5 0.69,0"/>
      <polygon points="0.53,0 0.75,0.5 0.59,1 0.48,1 0.64,0.5 0.41,0" />
    </clipPath>
  </defs>
</svg>

CSS部分（无需修改原有逻辑） #

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

同一个clipPath下的多个polygon默认会取裁剪区域并集，刚好满足同时应用两个多边形裁剪的需求，不会出现纯CSS写多个clip-path时后写属性覆盖前写的问题，适配所有支持SVG clip-path的现代浏览器。

内容的提问来源于stack exchange，提问作者kdubs