Question

我想给两个对象的交点着色，比如说一个圆形和一个矩形。

到目前为止，我尝试的是定义一个限制该区域的路径，然后添加fill属性，但这似乎太复杂了。

还有其他方法吗？

让我elabot成为问题之一：

<svg width="352" height="57" xmlns="http://www.w3.org/2000/svg">
  <line y2="0.75" x2="103.95" y1="43.15" x1="42.35" stroke-width="1.5" stroke="#000" fill="none"/>
  <line y2="50.35" x2="201.55" y1="0.75" x1="103.95" stroke-width="1.5" stroke="#000" fill="none"/>
  <line y2="19.15" x2="239.95" y1="49.55" x1="201.55" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
  <line y2="55.95" x2="282.35" y1="18.35" x1="240.75" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
  <line y2="37.55" x2="351.15" y1="31.95" x1="0.75" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
</svg>

我有一组线，一个线的一端是另一线的另一端。我有另一条线与这些线相交。如何为区域着色，即由这些线形成的三角形？

Answer 1

您可以使用<clipPath>用圆圈剪裁矩形：

svg{width:100vh;}

<svg viewBox="50 50 200 100">
<clipPath id="clip">
<use xlink:href="#c"  />
</clipPath>
<g fill="none" stroke="black" >
<circle id="c" cx="100" cy="100" r="30" />
<rect id="r" x="90" y="80" width="80" height="60" /> 
</g>
<use xlink:href="#r" clip-path="url(#clip)" fill="gold" />
</svg>

Answer 2

您可以使用opacity来使重叠元素的颜色发光，如下所示：

<svg  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
<g style="stroke:#000; stroke-width:1">
<circle cx="50"  cy="50" r="50" opacity="0.5"  style="fill:red" />
<circle cx="100" cy="50" r="50" opacity="0.5" style="fill:yellow" />
<rect x="0" y="70" width="150" height="50" fill-opacity="0.5" style="fill:blue" />
</g>
</svg>

您还可以使用stroke和fill为stroke-opacity和fill-opacity分别指定不透明度级别。

编辑：

再次查看已编辑的问题：当处理连续的直线（和曲线）时，应使用<path>元素而不是单个<line>元素。它的优点之一是它的填充行为几乎完全符合您的期望。但是，为适应示例的要求，您需要找到直线进入和离开锯齿形形状的位置。然后，这些位置定义用于填充路径的点。然后在填充的路径上绘制“原始”（未填充）路径：

<svg width="352" height="57" xmlns="http://www.w3.org/2000/svg">
<path d="M56,33       103.95,0.75 201.55,50.35 239.95,19.15 260,36z
         M0.75,31.95 351.15,37.55" style="fill:yellow" />
<path d="M42.35,43.15 103.95,0.75 201.55,50.35 239.95,19.15 282.35,55.95 
         M0.75,31.95 351.15,37.55" style="stroke:black;fill:none"/>
</svg>

如何给区域着色，即两个对象的交点？

2 个答案: