如何实现SVG圆角矩形的双色对角填充（纯SVG无CSS方案）

解决方案 #

你遇到的pattern对齐问题根源是patternUnits属性使用了userSpaceOnUse配置，该配置会让pattern以SVG全局坐标系为基准渲染，和被填充元素的位置无关。

仅需调整pattern的两个属性，配合内部图形坐标适配即可实现需求，全程纯SVG实现无需CSS：

1. 将pattern的patternUnits属性值改为objectBoundingBox，该配置表示pattern的定位、尺寸都以被填充元素的边界框为基准
2. 新增patternContentUnits="objectBoundingBox"属性，让pattern内部绘制的图形坐标也基于被填充元素的边界框计算，此时坐标值0对应元素的起始边，1对应元素的结束边
3. 把pattern内部多边形的坐标调整为0-1的比例值，适配新的坐标规则

修改后的完整代码如下：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" version="1.1" width="800" height="800">
  <defs>
    <pattern x="0" y="0" width="1" height="1" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" id="SvgjsPattern1008">
      <polygon points="0,0 1,1 0,1" fill="#ff00ff" stroke-width="0"/>
      <polygon points="0,0 1,0 1,1" fill="#00ff00" stroke-width="0"/>
    </pattern>
  </defs>
  <rect width="100" height="100" x="0" y="75" rx="20" ry="20" fill="url(#SvgjsPattern1008)"/>
</svg>

修改后不管你把圆角矩形放在SVG画布的任意位置，双色填充都会自动对齐矩形的左上角，也不会出现圆角透出的问题。

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