这是另一个黑客，但你可以添加一个过滤器到您的形状和剪辑顶部和底部的笔划宽度-在这里我假设是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>

更新日期：

下面是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")

下面是Michael Mullany发布的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")

[编码笔]（https://codepen.io/shaswatatripathy/pen/oNgPpyd）
HTML语言

<rect x="0.5" y="0.5" width="50" height="50" class="topBottom"/>

    <rect x="70.5" y="0.5" width="50" height="50" class="left"/>
    <rect x="140.5" y="0.5" width="50" height="50" class="topRight"/>
    <rect x="200.5" y="0.5" width="50" height="50" class="top"/>
  <rect x="260.5" y="0.5" width="50" height="50" class="bottomLeft"/>
  <rect x="320.5" y="0.5" width="50" height="50" class="bottomRight"/>

  <rect x="380.5" y="0.5" width="50" height="50" class="topLeft"/>

   <rect x="440.5" y="0.5" width="50" height="50" class="right"/>
  <rect x="500.5" y="0.5" width="50" height="50" class="bottom"/>

  <rect x="560.5" y="0.5" width="50" height="50" class="leftRight"/>

</svg>

CSS系统

rect { fill: none; stroke: black; }
.topBottom { stroke-dasharray: 50 }
.leftRight { stroke-dasharray: 0,50,50,0 }

.bottomLeft { stroke-dasharray: 0,100,150 }
.bottomRight { stroke-dasharray: 0,50,50 }
.topRight { stroke-dasharray: 100 }
.topLeft { stroke-dasharray: 50,100 }

.left { stroke-dasharray: 0,150,50 }
.top { stroke-dasharray: 50,150 }
.bottom { stroke-dasharray: 0,100,50,100 }
.right { stroke-dasharray: 0,50, 50,50 }

你似乎不能这样做。
您可能需要在矩形的两边画一条线，然后从矩形的当前宽度中减去这些线宽。

我的例子是在使用d3.js和画笔工具时。

# Brush object
brush.x(core.xScale()).on("brush", onBrush)         

# Call the brush object
container.call(brush).selectAll("rect").attr("height", core.height())

# Method on brush
onBrush = () ->
  extent = brush.extent()
  extent = if brush.empty() then core.xScale().domain() else extent

不管怎样，作为画笔工具的一部分，两个矩形被添加到画笔的左右边界。你可以简单地用css选择它们并重新设置它们的样式。这就是我最终做的，这里是我在.less中的解决方案

.resize {
    rect { 
        visibility: visible !important;
        fill: #444444;
    }
}