描边 rect svg 的左侧和右侧

Question

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

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

Answer 1

这是另一种技巧，但您可以为您的形状添加一个过滤器，并根据您的笔画宽度裁剪顶部和底部 - 我假设这里是 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")

Answer 2

这是 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")

Answer 3

[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 }

Answer 4

你似乎不能这样做。

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

Answer 5

我的例子是使用 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;
    }
}