SVG是否已实现反向绘图样式（XOR笔）？

SVG原生并没有专门提供“反向绘图样式”（即自动反转下方像素颜色的绘图模式），你目前用多条黑白线条模拟的方式，在复杂场景下确实会非常繁琐。

不过可以通过以下几种原生特性来实现类似效果，无需手动拆分图形：

1. 使用CSS mix-blend-mode: difference #

这是最简单的方式，difference混合模式会自动计算当前图形颜色与下方像素颜色的差值，最终呈现出类似反向的效果。比如你的十字线可以直接用单条线条实现：

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="10" fill="none" />
  <!-- 单条白色线条，通过混合模式实现反向效果 -->
  <line x1="100" y1="25" x2="100" y2="175" stroke="white" stroke-width="10" fill="none" style="mix-blend-mode: difference;" />
</svg>

2. 使用SVG滤镜实现颜色反转 #

通过<filter>定义颜色反转效果，再应用到图形上，适合需要更精确控制的场景：

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义反转滤镜 -->
    <filter id="invert">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="1 0" />
        <feFuncG type="table" tableValues="1 0" />
        <feFuncB type="table" tableValues="1 0" />
      </feComponentTransfer>
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" stroke="black" stroke-width="10" fill="none" />
  <!-- 应用滤镜的线条，会反转下方颜色 -->
  <line x1="100" y1="25" x2="100" y2="175" stroke="black" stroke-width="10" fill="none" filter="url(#invert)" />
</svg>

关于像素颜色探测的问题 #

SVG确实没有原生API直接获取某点的像素颜色值，不过上面的两种方案都不需要手动探测颜色，由浏览器自动处理混合或滤镜效果，完全适用于选框、校准十字线这类复杂场景，不需要拆分图形成多条线段。

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