html5 - Stroke left and right side of rect svg -


i have drawn rect in svg using d3 , stroke left , right side.

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

it's hack, can add filter shape , clip top , bottom strokewidth - here i'm assuming 1 unit.

<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:

here d3.js version of answer created christopher chiche (see original lower down):

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

Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -