时间戳

首页 > 解决方案 > 如何实现对角线双色填充

svg - 如何实现对角线双色填充

问题描述

我正在尝试用两种颜色填充圆角矩形，对角线两侧的一种颜色。

我尝试添加一个三角形填充多边形，但这通过父矩形透明角显示。

因此，我尝试使用一种几乎可以正常工作的模式。

问题是该模式似乎从整个 SGV 的坐标 0,0 开始，而不是它正在填充的形状。

这里的例子：

<?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="100" height="100" patternUnits="userSpaceOnUse" id="SvgjsPattern1008">
      <polygon points="0,0 100,100 0,100" fill="#ff00ff" stroke-width="1" patternUnits="objectBoundingBox"/>
      <polygon points="0,0 100,0 100,100" fill="#00ff00" stroke-width="1" patternUnits="objectBoundingBox"/>
    </pattern>
  </defs>
  <rect width="100" height="100" x="0" y="75" rx="20" ry="20" fill="url(&quot;#SvgjsPattern1008&quot;)"/>
</svg>

我怎样才能让图案从矩形的左上角开始？

另外，我正在寻找一个纯 SVG 解决方案，没有 CSS。

标签： svg

解决方案

最简单的是转换为 objectBoundingBox 单位 - 它们从 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="100" height="100" patternContentUnits="objectBoundingBox" id="SvgjsPattern1008">
      <polygon points="0,0 1,1 0,1" fill="#ff00ff" stroke-width="1" />
      <polygon points="0,0 1,0 1,1" fill="#00ff00" stroke-width="1" />
    </pattern>
  </defs>
  <rect width="100" height="100" x="0" y="75" rx="20" ry="20" fill="url(&quot;#SvgjsPattern1008&quot;)"/>
</svg>

推荐阅读