Menu
I have drawn a rect in svg using d3 and would like to stroke only the left and right side.
<rect class="extent" x="578" width="356" height="250"
style="cursor: move; opacity: 0.2; fill: #FF9000;" ></rect>
690
The stroke-width property in CSS is for setting the width of a border on SVG shapes. .module { stroke-width: 2; } Remember: This will override a presentation attribute <path stroke-width="2" ... /> This will not override an inline style e.g. <path style="stroke-width: 2;" ... />
Using fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is red ), rgb values (that is rgb(255,0,0) ), hex values, rgba values, etc.
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly. This answer is technically not using CSS.
The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape; Note: As a presentation attribute, stroke-dasharray can be used as a CSS property.
It's another hack, but you can add a filter to your shape and clip the top and bottom by your strokewidth - which here I'm assuming is 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 is the d3.js version of the answer created by 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")
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
