左側和右側的行程sdg

我已經使用d3在svg中繪製了一個矩形，並且只想描邊左側和右側。左側和右側的行程sdg

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

來源

2013-04-17 imrane

可能重複[如何設置一個筆畫寬度：1對SVG圖形的某些側面（HTTP：//計算器。 com/questions/8976791/how-to-set-a-stroke-width1-on-only-certain-sides-of-svg-shapes） – KyleMit

這裏有另外一個SO問題，它暗示了這樣做：http：// stackoverflow.com/questions/8976791/how-to-set-a-stroke-width1-on-only-certain-sides-of-svg-shapes – Jonah

這是另一個黑客，但你可以添加一個過濾器到你的形狀，並通過你的strokewidth來裁剪頂部和底部 - 我假設這裏是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>

更新：

這裏是由克里斯托弗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")

來源

2013-04-18 04:17:40

同意@ChrisJamesC你能做到嗎？ – imrane

@Jonah使用'stroke-dasharray'引用了一個絕妙的解決方案。 – Roman

你似乎無法做到這一點。

您可能需要在兩側繪製一條線，並從矩形的當前寬度中減去這些線寬。

來源

2013-04-17 22:48:45

這裏是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")

來源

2013-04-18 06:40:27

嗨克里斯 - 如果你沒事的話，我可以剪切並粘貼到我的答案中，並稱贊你。 B –

嘿，應該說「deColorMatrix」是「feColorMatrix」，還是那個d3的東西？ –

正如你所說，它應該是「deColorMatrix」 –

我的例子是當使用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和restyle他們。這是我落得這樣做，這裏是我的.LESS解決方案的

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

來源

2013-04-18 17:58:20 imrane

左側和右側的行程sdg

回答

相關問題