在SVG矩形上渲染斜面边框

Question

是否可以渲染SVG rect的边界以模拟起点？

• 使用CSS？
• 带有过滤器？

注意：它必须是单个可伸缩的简单rect对象，所以我不想使用路径/复合对象来构建它。

Answer 1

可以使用过滤器执行此操作。您可以通过在SVG中绘制遮罩形状并在滤镜中进行描边来完成此操作。

<svg width="600px" height="800px" color-interpolation-filters="sRGB">
  <filter id="rect-and-stroke" x="0%" y="0%" width="100%" height="100%">
    <feFlood flood-color="red" result="red-stroke"/>
    <feFlood flood-color="orange" result="orange-stroke"/>
    <feFlood x="10" y="10" width="180" height="80" flood-color="yellow" result="yellow-field"/>
     
     <feComposite operator="in" in2="SourceGraphic" in="red-stroke" result="red-partial"/> 
     <feComposite operator="out" in2="SourceGraphic" in="orange-stroke" result="orange-partial"/> 
    <feMerge>
      <feMergeNode in="red-partial" />
      <feMergeNode in="orange-partial" />
       <feMergeNode in="yellow-field" />    
      
    </feMerge>
    
  </filter>
  
  
  <path filter="url(#rect-and-stroke)" fill="black" d="M 0 0  L 10 10 180 80 200 100 0 100Z"/>
  
</svg>