javascript - 如何仅在外部设置 svg 路径阴影？

Question

是否可以仅在外边界上获得阴影效果？

image

Answer 1

直接来自文档:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow#SVG

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.5" 
          flood-color="cyan"/>
    </filter>
    <filter id="shadow3">
      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" 
          flood-color="pink" flood-opacity="0.5"/>
    </filter>
  </defs>

  <circle cx="5" cy="50%" r="4"
      style="fill:pink; filter:url(#shadow);"/>
 
  <circle cx="15" cy="50%" r="4"
      style="fill:pink; filter:url(#shadow2);"/>  
 
  <circle cx="25" cy="50%" r="4"
      style="fill:pink; filter:url(#shadow3);"/>
</svg>

输出(中间的应该是你需要的？只需要改成一条路径——我现在会尝试这样做):



带路径:

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.5" 
          flood-color="cyan"/>
    </filter>
    <filter id="shadow3">
      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" 
          flood-color="pink" flood-opacity="0.5"/>
    </filter>
  </defs>

  <circle cx="5" cy="50%" r="4"
      style="fill:pink; filter:url(#shadow);"/>
 
  <path d="M11 1, v8, h8, v-8, z"
      style="fill:white; filter:url(#shadow2);"/>  
 
  <circle cx="25" cy="50%" r="4"
      style="fill:pink; filter:url(#shadow3);"/> 

输出:



现在我看到了一些问题，因为它不透明:

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.5" 
          flood-color="cyan" flood-opacity="0.5"/>
    </filter>
    <filter id="shadow3">
      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" 
          flood-color="pink" flood-opacity="0.7"/>
    </filter>
  </defs>

  <circle cx="5" cy="50%" r="4"
      style="fill:pink; filter:url(#shadow);"/>
 
  <circle cx="25" cy="50%" r="4"
      style="fill:pink; filter:url(#shadow3);"/>
      
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100%" height="100%" fill="white" />
    
    <!-- Everything under a black pixel will be invisible -->
    <polygon fill="black" points="0.02,0.02 0.98,0.02 0.98,0.98 0.02,0.98 0.02,0.02" />
    <!--
    <path d="M14 1, v8, h8, v-8, z" fill="black" />
    -->
  </mask>

  <rect x="16" y="1" width="8" height="8"
  mask="url(#myMask)"
  fill="white"
  stroke="black"
  stroke-width="0.2"
  style="filter:url(#shadow2);"/>   
  
<!--  
  <path d="M14 1, v8, h8, v-8, z"
  style="fill:white; stroke:black; stroke-width: 0.2;    
    mask=url(#myMask);
    filter:url(#shadow2);"/>  
-->      
<!--
  <path d="M14 1, v8, h8, v-8, z"
  style="fill:none; stroke:black; stroke-width: 0.2;
  clip-path: polygon(0% 0%, 0% 100%, 1% 100%, 1% 1%, 99% 1%, 99% 99%, 1% 99%, 1% 100%, 100% 100%, 100% 0%);    
    filter:url(#shadow2);"/>  

    <rect x="14" y="1" width="8" height="8"
  style="fill:white; stroke:black; stroke-width: 0.2;
    clip-path: polygon(0% 0%, 0% 100%, 1% 100%, 1% 1%, 99% 1%, 99% 99%, 1% 99%, 1% 100%, 100% 100%, 100% 0%);
    filter:url(#shadow2);"/>     
-->

输出(尚未透明):



下一次尝试:

我可以用矩形或路径(圆圈在矩形/路径后面，你可以看到)但我(还)不知道如何为任意路径执行此操作:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="2" 
          flood-color="cyan" flood-opacity="0.7"/>
    </filter>
  </defs>
  <mask id="myMask" maskContentUnits="objectBoundingBox">
    <rect    fill="white" x="-10%" y="-10%" width="120%" height="120%" />
    <polygon fill="black" points="0.02,0.02 0.98,0.02 0.98,0.98 0.02,0.98 0.02,0.02" />
  </mask>
  <!--
  Punch a hole in a shape of a square inside the white rect,
  revealing the yellow circle underneath
  -->
  <circle cx="50" cy="50" r="20" fill="yellow" />
<!--  
  <rect x="25" y="25" height="50" width="50" fill="white"
  stroke="black"
  stroke-width="2"
  mask="url(#myMask)"
  style="filter:url(#shadow2);"    
  />
-->
  <path d="M25,25 v50, h50, v-50, z" fill="white"
  stroke="black"
  stroke-width="2"
  mask="url(#myMask)"
  style="filter:url(#shadow2);"    
  />

</svg>

输出:



另一个例子:

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.8" flood-color="cyan" flood-opacity="0.7" />
    </filter>
    <filter id="shadow3">
      <feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" flood-color="pink" flood-opacity="0.7" />
    </filter>
  </defs>
  <mask id="myMask" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="-10%" y="-10%" width="120%" height="120%" />
    <polygon fill="black" points="0.015,0.015 0.985,0.015 0.985,0.985 0.015,0.985 0.015,0.015" />
  </mask>
  <!--
  Punch a hole in a shape of a square inside the white rect,
  revealing the yellow circle underneath
  -->
  <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);" />

  <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);" />
  <path d="M14 1, v8, h8, v-8, z" fill="white" stroke="black" stroke-width="0.2" mask="url(#myMask)" style="filter:url(#shadow2);" />
<!--   <rect x="14" y="1" height="8" width="8" fill="white" stroke="black" stroke-width="0.2" mask="url(#myMask)" style="filter:url(#shadow2);" /> -->

  <!--   <circle cx="50" cy="50" r="20" fill="yellow" /> -->
  <!--   <rect x="25" y="25" height="50" width="50" fill="white" stroke="black" stroke-width="2" mask="url(#myMask)" style="filter:url(#shadow2);" /> -->
</svg>

输出: