Revisions to Is there way to combine two SVGs with opacity and only show one SVG when they overlap?

added 161 characters in body

Source Link

edited Oct 28, 2023 at 6:21

103
7

I want to fill the gap in the arrowround-arrow line, and the arrowround-arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrowround-arrow line.
However, I encountered an issue where the opacity of the arrowround-arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrowround-arrow line.
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...) Here is my codepen demo: https://codepen.io/cactusxx/pen/gOqaQxQ

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" stroke="rgb(255,0,0)" stroke-width="5" stroke-linejoin="round" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--    Blend blendthe blue line withinto the SourceGraphic. -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" stroke="rgb(255,0,0)" stroke-width="5" stroke-linejoin="round"/>
  </g>

</svg>

I want to fill the gap in the arrow line, and the arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrow line.
However, I encountered an issue where the opacity of the arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrow line.
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...) Here is my codepen demo: https://codepen.io/cactusxx/pen/gOqaQxQ

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

I want to fill the gap in the round-arrow line, and the round-arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the round-arrow line.
However, I encountered an issue where the opacity of the round-arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the round-arrow line.
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...) Here is my codepen demo: https://codepen.io/cactusxx/pen/gOqaQxQ

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" stroke="rgb(255,0,0)" stroke-width="5" stroke-linejoin="round" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--  Blend the blue line into the SourceGraphic. -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" stroke="rgb(255,0,0)" stroke-width="5" stroke-linejoin="round"/>
  </g>

</svg>

added 66 characters in body

Source Link

edited Oct 27, 2023 at 10:39

personax

103
7

I want to fill the gap in the arrow line, and the arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrow line.
However, I encountered an issue where the opacity of the arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrow line.
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...) Here is my codepen demo: https://codepen.io/cactusxx/pen/gOqaQxQ

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

I want to fill the gap in the arrow line, and the arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrow line.
However, I encountered an issue where the opacity of the arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrow line.
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...)

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

I want to fill the gap in the arrow line, and the arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrow line.
However, I encountered an issue where the opacity of the arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrow line.
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...) Here is my codepen demo: https://codepen.io/cactusxx/pen/gOqaQxQ

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

added 255 characters in body

Source Link

edited Oct 27, 2023 at 9:12

Kaiido

132.1k
14
241
305

I want to fill the gap in the arrow line, and the arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrow line. However
However, I encountered an issue where the opacity of the arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrow line. Is
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...)

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

I want to fill the gap in the arrow line, and the arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrow line. However, I encountered an issue where the opacity of the arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrow line. Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...)

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

I want to fill the gap in the arrow line, and the arrow line with opacity less than 1. I achieved this in the following code snippet, but I noticed it causes an overlap problem. I'd like to remove the semi-circle overlap area. To do this, I attempted to blend the gap line with the arrow line.
However, I encountered an issue where the opacity of the arrow line affected the gap line. I simply want to eliminate the semi-circle and ensure that the opacity of the gap line is not influenced by the arrow line.
Is there a way to accomplish this goal? (Maybe the worst way is to mask the semi-circle...)

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <polyline id="p1" points="50,50 250,50" fill="none" stroke-width="10" stroke-linecap="round" />
    <mask id="m1" maskUnits="userSpaceOnUse">
      <use href="#p1" stroke="white" />
      <use href="#p1" stroke="black" stroke-dasharray="40 30" />
    </mask>
  </defs>

  <!--   blue gap line-->
  <use href="#p1" stroke="blue" mask="url(#m1)" />
  <!--   line with arrow -->
  <g fill-opacity="0.5">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" stroke-opacity="0.5" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!--     blend blue line with SourceGraphic -->
    <polyline id="pp" points="50,50 250,50" fill="none" stroke-width="10" stroke="blue" stroke-linecap="round" />
    <filter id="blend" filterUnits="userSpaceOnUse">
      <feImage x="0" y="0" xlink:href="#pp" result="backline" />
      <feBlend in="SourceGraphic" in2="backline" mode="normal" />
    </filter>
  </defs>

  <g opacity="0.5" filter="url(#blend)">
    <use href="#p1" stroke="rgb(255,0,0)" stroke-dasharray="40 30" />
    <!--     arrow -->
    <polygon id="arrowPoly" points="250,35 280,50 250,65" fill="rgb(255,0,0)" />
  </g>

</svg>

added 52 characters in body

Source Link

edited Oct 27, 2023 at 9:06

personax

103
7

Loading

Source Link

asked Oct 27, 2023 at 8:00

personax

103
7

Loading

Collectives™ on Stack Overflow

Return to Question