主页 / 问题 / 1206733
Accepted
UModeL
Asked:2021-11-19 14:39:11 +0000 UTC2021-11-19 14:39:11 +0000 UTC

feComposite 过滤器：在相交处移除形状的一部分

  • 772

我做了这个形状：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <path d="M 50 30 l 20 30 l -40 0 z M 45 45 h 30 v 30 h -30 z M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z " fill="#ff0" stroke="#000" stroke-width="1" fill-rule="evenodd"></path>
</svg>

接下来，希望用不同的颜色绘制人物的元素。然后我遇到了一个问题：图形是由一个绘制的<path>- 因此，对于填充，您只能设置一种颜色，这对所有元素都是通用的。

我将整个形状分成单独的形状，并给每个形状都指定了所需的颜色：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <path fill="#f00a" stroke="#000" stroke-width="1" d="M 50 30 l 20 30 l -40 0 z "></path>
  <path fill="#080a" stroke="#000" stroke-width="1" d="M 45 45 h 30 v 30 h -30 z "></path>
  <path fill="#00fa" stroke="#000" stroke-width="1" d="M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z "></path>
</svg>

现在，在形状相交的地方，填充并没有被移除，颜色只是简单地相互叠加。

我尝试使用过滤器<feFlood>并<feComposite>与 结合使用<feMerge>，但我对参数完全感到困惑......

<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
  <defs>
    <path id="T" fill="#f00a" stroke="#000" stroke-width="1" d="M 50 30 l 20 30 l -40 0 z "></path>
    <path id="R" fill="#080a" stroke="#000" stroke-width="1" d="M 45 45 h 30 v 30 h -30 z "></path>
    <path id="C" fill="#00fa" stroke="#000" stroke-width="1" d="M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z "></path>
    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#fff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
      <feMerge>
        <feMergeNode in="flood"/>
        <feMergeNode in="comp"/>
      </feMerge>
    </filter>
  </defs>   
  <use xlink:href="#T" filter="url(#xorFlood)" />
  <use xlink:href="#R" filter="url(#xorFlood)" />
  <use xlink:href="#C" filter="url(#xorFlood)" />
</svg>

研究专业资源，其中所有内容都描述得很干巴巴，并试图调整其他人的例子以适应他们的任务，并没有增加清晰度和理解力。我想了解一个具体的例子。（形状的透明度是可选的，但可取。）

svg

1 个回答

  1. Best Answer

    您可以使用svgtag 使一个元素填充另一个元素。<pattern>当然不是过滤器，但结果似乎是正确的。

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="10 15 75 75" preserveAspectRatio="xMinYMin" style="width: 150px; height: 150px; border: 1px dotted red;">
    <defs>
    <pattern id="pattern" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <path fill="#f00a" d="M 50 30 l 20 30 l -40 0 z " />
            <path fill="#080a" d="M 45 45 h 30 v 30 h -30 z " />
            <path fill="#00fa" d="M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z " />
    </pattern>
  </defs>
  <path d="M 50 30 l 20 30 l -40 0 z M 45 45 h 30 v 30 h -30 z M 35 45 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30 z " fill="url(#pattern)" stroke="#000" stroke-width="1" fill-rule="evenodd"></path>  
</svg>

    • 2

相关问题