我已经使用 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>
更新:
这是 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")
这是d3.js
Michael Mullany 发布的答案版本。如果您想接受我的回答,请改为接受他的回答。我只是将其作为一个练习来获得乐趣:
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")
[Codepen](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
无论如何,作为画笔工具的一部分,添加了 2 个矩形作为画笔的左右边界。您可以简单地使用 css 选择这些并重新设置它们的样式。这就是我最终要做的,这是我在 .less 中的解决方案
.resize {
rect {
visibility: visible !important;
fill: #444444;
}
}