描边矩形 svg 的左侧和右侧

我使用 d3 在 svg 中绘制了一个矩形，并且只想描边左侧和右侧。

<rect class="extent" x="578" width="356" height="250"
      style="cursor: move; opacity: 0.2; fill: #FF9000;" ></rect>

这是另一个技巧，但你可以在你的形状中添加一个过滤器，并通过你的笔画宽度来剪辑顶部和底部 - 这里我假设是 1 个单位。

<defs>
   <filter id="clippy" x="0" y="1" height="248" width="356">
     <feColorMatrix type="identity"/>
   </filter>
</defs>
<rect filter="url(#clippy)" class="extent" width="356" height="250"
      style="cursor: move;opacity: 0.2; fill: #FF9000;" x="578"></rect>

Update:

这是 Christopher Chiche 创建的答案的 d3.js 版本（请参阅下面的原始内容）：

svg.append("defs").append("filter")
    .attr("id", "clippy")
    .attr("x", "0")
    .attr("y", "1")
    .attr("height", "248")
    .attr("width" "356")
    .append("feColorMatrix")
    .attr("type", "identity")

svg.append("rect")
    .attr("filter", "url(#clippy)")
    .attr("class", "extent") 
    .attr("style", "cursor:move; opacity:0.2; fill: #FF9000")
    .attr("x", "578")
    .attr("height", "250")
    .attr("width" "356")

Edit:

实际上，最好的答案可能是使用在上面的问题评论中链接的中风破折号方法，而不是使用过滤器。