SVG path mask not working - svg
According to example of this tutorials I want to mask my icon (black and white) instead of text in this tutorial. but right side of icon is still dark. how can I make left side of my icon black stroke and right side of icon goes white stroke?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="41px" height="50px" viewbox="-3 -3 40 48">
<defs>
<mask id="myMask" maskUnits="userSpaceOnUse"
x="0" y="0" width="18" height="50">
<rect x="0" y="0" width="15" height="50" fill="white"/>
</mask>
<path id="fire-icon" d="m 25.55134,17.573125 c 0.647761,1.273107 1.136636,2.596633 1.344412,4.021007 0.21999,1.47479 0.13444,2.924371 -0.342217,4.348739 -0.427768,1.273111 -1.124413,2.382358 -2.004391,3.378155 -0.977758,1.096637 -2.114394,1.991591 -3.348802,2.773105 -0.183328,0.113445 -0.366658,0.226895 -0.57443,0.365546 1.429964,-3.214282 1.686623,-5.760501 0.366659,-8.924365 -0.904421,-2.155462 -2.395495,-3.743696 -3.519909,-4.4874 0,0 0.305545,3.655466 -2.248829,5.9874 0.391098,-1.184876 -0.672208,-2.31933 -0.672208,-2.31933 -0.31777,1.386549 -0.8922,1.651268 -1.662178,2.836135 -0.366658,0.567227 -0.708873,1.159666 -0.941085,1.802516 -0.342214,0.970596 -0.403325,1.953785 -0.207778,2.96219 0.134444,0.668067 0.342218,1.310925 0.63554,1.941174 0.02446,0.05042 0.04889,0.113449 0.08556,0.226893 C 12.156129,32.308418 11.899468,32.169763 11.655035,31.993294 10.921719,31.463881 10.163961,30.959677 9.467313,30.37985 8.5628918,29.623547 7.8173555,28.715982 7.3284794,27.619344 7.0351536,26.951277 6.8640469,26.245395 6.8151593,25.514301 c -0.097775,-1.65126 0.2933257,-3.201685 0.9899743,-4.676472 0.5010979,-1.071427 0.9777525,-2.142852 1.4544067,-3.226887 0.1344411,-0.31513 0.2199942,-0.66807 0.3055478,-1.008411 0.085554,-0.327726 0.1344412,-0.668063 0.1955503,-1.033609 0.9777516,0.46639 1.4544056,2.521009 0.9044216,3.857144 0.02444,0 0.03666,0 0.06111,0 0.232216,-0.302517 0.464431,-0.605039 0.696652,-0.907563 0.977751,-1.323526 1.869945,-2.684872 2.566595,-4.184872 0.623316,-1.34874 1.099973,-2.735295 1.185527,-4.247902 0.02445,-0.5294123 -0.02445,-1.0714263 -0.03667,-1.6008383 0.01223,0 0.02445,0 0.03667,0 0.65998,0.315125 1.307741,0.680673 1.882172,1.134457 1.014423,0.8193243 1.857728,1.7899163 2.566601,2.8991563 0.892198,1.411766 1.515512,2.936975 1.955505,4.550418 0.01223,0.06302 0.03667,0.126055 0.06111,0.214286 1.344407,-1.210083 0.513317,-4.172266 0.501096,-4.222688 -0.02445,-0.0252 2.261053,2.029411 3.409911,4.512605 z"
fill="none" stroke="#303233" stroke-width="1.3" />
</defs>
<!-- Draw black rectangle in the background -->
<rect x="18" y="0" width="15" height="50" fill="#000" />
<!-- Draw the text string twice. First, the white text without mask.
Second, the black text with the mask applied-->
<use xlink:href="#fire-icon" stroke="white"/>
<use xlink:href="#fire-icon" stroke="black" mask="url(#myMask)"/>
</svg>
There's no mask issue. The stroke on the path overrides the stroke on the use element, so in the question there are two grey (#303233) stroked paths. Removing the path stroke atribute allows the use to set one.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="41px" height="50px" viewbox="-3 -3 40 48">
<defs>
<mask id="myMask" maskUnits="userSpaceOnUse"
x="0" y="0" width="18" height="50">
<rect x="0" y="0" width="15" height="50" fill="white"/>
</mask>
<path id="fire-icon" d="m 25.55134,17.573125 c 0.647761,1.273107 1.136636,2.596633 1.344412,4.021007 0.21999,1.47479 0.13444,2.924371 -0.342217,4.348739 -0.427768,1.273111 -1.124413,2.382358 -2.004391,3.378155 -0.977758,1.096637 -2.114394,1.991591 -3.348802,2.773105 -0.183328,0.113445 -0.366658,0.226895 -0.57443,0.365546 1.429964,-3.214282 1.686623,-5.760501 0.366659,-8.924365 -0.904421,-2.155462 -2.395495,-3.743696 -3.519909,-4.4874 0,0 0.305545,3.655466 -2.248829,5.9874 0.391098,-1.184876 -0.672208,-2.31933 -0.672208,-2.31933 -0.31777,1.386549 -0.8922,1.651268 -1.662178,2.836135 -0.366658,0.567227 -0.708873,1.159666 -0.941085,1.802516 -0.342214,0.970596 -0.403325,1.953785 -0.207778,2.96219 0.134444,0.668067 0.342218,1.310925 0.63554,1.941174 0.02446,0.05042 0.04889,0.113449 0.08556,0.226893 C 12.156129,32.308418 11.899468,32.169763 11.655035,31.993294 10.921719,31.463881 10.163961,30.959677 9.467313,30.37985 8.5628918,29.623547 7.8173555,28.715982 7.3284794,27.619344 7.0351536,26.951277 6.8640469,26.245395 6.8151593,25.514301 c -0.097775,-1.65126 0.2933257,-3.201685 0.9899743,-4.676472 0.5010979,-1.071427 0.9777525,-2.142852 1.4544067,-3.226887 0.1344411,-0.31513 0.2199942,-0.66807 0.3055478,-1.008411 0.085554,-0.327726 0.1344412,-0.668063 0.1955503,-1.033609 0.9777516,0.46639 1.4544056,2.521009 0.9044216,3.857144 0.02444,0 0.03666,0 0.06111,0 0.232216,-0.302517 0.464431,-0.605039 0.696652,-0.907563 0.977751,-1.323526 1.869945,-2.684872 2.566595,-4.184872 0.623316,-1.34874 1.099973,-2.735295 1.185527,-4.247902 0.02445,-0.5294123 -0.02445,-1.0714263 -0.03667,-1.6008383 0.01223,0 0.02445,0 0.03667,0 0.65998,0.315125 1.307741,0.680673 1.882172,1.134457 1.014423,0.8193243 1.857728,1.7899163 2.566601,2.8991563 0.892198,1.411766 1.515512,2.936975 1.955505,4.550418 0.01223,0.06302 0.03667,0.126055 0.06111,0.214286 1.344407,-1.210083 0.513317,-4.172266 0.501096,-4.222688 -0.02445,-0.0252 2.261053,2.029411 3.409911,4.512605 z"
fill="none" stroke-width="1.3" />
</defs>
<!-- Draw black rectangle in the background -->
<rect x="18" y="0" width="15" height="50" fill="#000" />
<!-- Draw the text string twice. First, the white text without mask.
Second, the black text with the mask applied-->
<use xlink:href="#fire-icon" stroke="white"/>
<use xlink:href="#fire-icon" stroke="black" mask="url(#myMask)"/>
</svg>
Related
SVG element with clippath prevents events on underlying element
Edit: Maybe I need to test my assumption...
Is there a way to render svg so an element underlying another element can receive events?
The red circle does not respond to its hover event where it is under the clipped circle.
The rectangle iindicates the masked and clipped area of the green circle.
I want the visible red and green areas to both receive pointer events.
How would I get the whole red circle to respond - It has to underly the green circle.
Fiddle
<svg id="svg_wrp" width="600" height="600" style='z-index:2'>
<defs>
<mask id="green_mask">
<circle cx="300" cy="300" r="200" fill="#fff"></circle>
<rect x="100" y="50" width="400" height="200" fill="#000"></rect>
</mask>
<clipPath id="green_clip">
<rect x="100" y="50" width="400" height="200" fill='#000'></rect>
</clipPath>
</defs>
<!-- Following for reference only -->
<rect x="100" y="50" width="400" height="200" stroke="#080" fill="none"></rect>
<circle cx="300" cy="300" r="200" fill="rgba(0 0 255 /.2)" stroke="#080"></circle>
<!-- Above for reference only -->
<g>
<circle cx="300" cy="50" r="100" fill="rgba(255 0 0 /1)" class="hover_it" ></circle>
<!-- Following circle will have top part hidden, but mask does not prevent events -->
<circle id="green_hide_area"
cx="300" cy="300" r="200" fill="rgba(0 255 0 /1)" class="hover_it" mask="url(#green_mask)" ></circle>
</g>
<g>
<!-- Following circle will prevent events -->
<circle id="green_event_stop"
cx="300" cy="300" r="200" fill="transparent" clip-path="url(#green_clip)" ></circle>
</g>
</svg>
.hover_it{opacity:.5}
.hover_it:hover{opacity:1}
SVG feImage filter clips stroke - how to stop that?
I'm trying to create a filter for only the stroke of path in SVG, but the feImage keeps getting clipped to what I assume is that bounding box (see green rectangle below in code as bounding box). I've tried setting the filter's x/y and width/height to all sorts of positions/sizes, as seems to be the prevailing advice, but nothing works. x/y just offset the feImage and width/height of greater than 100% has no effect. I won't know in advance if the stroke or fill is solid or something else (like linearGradient. The below demonstrates what I'm looking to do - just get the stroke of a shape (regardless of size or fill) and apply a filter to it for all modern browsers. Notes: FF doesn't even display the left-hand feImage. Chrome clips the left and top. Edge clips all 4 sides. <html> <body> <svg width="960" height="540" > <rect width="960" height="540" stroke="#385D8A" fill="white" stroke-width="3"/> <svg name="BoundingBox1" class="rect" x="100" y="100" overflow="visible" fill="none" stroke="#00ff00" stroke-width="1"> <path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" /> </svg> <!-- BELOW IS MODIFIED "SPEECH" SHAPE. NEED A FILTER ON THE STROKE ONLY. --> <svg name="Speech-strokeonly" x="100" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="strokeOnly" fill="none"/> <filter id="effs0sp9" color-interpolation-filters="sRGB" x="0" y="0"> <feImage xlink:href="#strokeOnly" /> </filter> </defs> <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" filter="url(#effs0sp9)" overflow="visible" /> <text y="160" stroke="black" stroke-width="0.2">this is the one that has undesirable clipping of</text> <text y="178" stroke="black" stroke-width="0.2">of stroke in Chrome/Edge. Doesn't appear at all in FF</text> </svg> <!-- BELOW IS ORIGINAL WITH BOTH FILL AND STROKE --> <svg name="BoundingBox2" x="400" y="100" overflow="visible" fill="none" stroke="green" stroke-width="1"> <path d="M0,0L121.68,0L121.68,121.68L0,121.68Z" /> </svg> <svg name="Speech-original" x="400" y="100" overflow="visible" fill="blue" stroke="orange" stroke-width="12"> <path d="M35.541,137.084L30.985,113.988A60.926,60.926 0 1 1 53.043,121.34Z" id="effs0sp9" /> <text y="-22" stroke="black" stroke-width="0.2">this is the original one</text> <text y="-6" stroke="black" stroke-width="0.2">that I just want the stroke as feImage from</text> </svg> </svg> </body> </html> Is there a way to grab the whole stroke of a shape only and use in a filter?
SVG how to set max width for group
I have some SVG elements grouped together in a <g> element (exactly the barcode 1D, PHP generates a barcode). <g style="fill:#000000;stroke:none" id="barcode1D" transform="matrix(1.2083333,0,0,0.8247805,62.027778,573.54235)"> <rect x="0" y="0" width="4" height="30" id="xyz" /> .... <rect x="224" y="0" width="0" height="30" id="xyzn" /> </g> The barcode is generated in various widths, lengths. How can I set the width permanently ? Based on this example, I am asking for a hint. Thank you for your help in advance.
SVG g element does not have width and height attributes. Therefore, you can not set height and width on it. You should use a foreignObject with a svg inside of it to do so. <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <foreignObject id="G" width="300" height="200"> <svg> <!-- Barcode here --> <rect fill="black" stroke-width="2" height="112" width="84" y="55" x="55" stroke="#000000"/> <circle fill="#FF0000" stroke="#000000" stroke-width="5" cx="155" cy="65" id="svg_7" r="50"/> </svg> </foreignObject> </svg>
How to size an SVG
I am trying to create an SVG sprite. I have set the SVG image to be 100px wide, 50px height, then offset the second by 50. How can I set the size of the actual icon? Currently, the icon is huge and not 50px. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="50px"> <defs> <g id="arrow"> <path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0 L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91 c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166 c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281 c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0 c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/> </g> </defs> <use x="0" y="0" style="fill: #333" xlink:href="#arrow" /> <use x="50" y="0" style="fill: #999" xlink:href="#arrow" /> </svg> This is what I see:
DO NOT USE TRANSFORM FOR SCALING What you are missing is a defined viewBox. If you do not define a viewBox the viewBox is the same size as the height and width that you defined. So when you draw a path and some of its point are above 370 then they will be outside its container. Since your defined size is 100 width by 50 height. Any point with values higher then the size will not be drawn. when you define a viewBox you can change the size without affecting what is drawn or not. This is the article i allways use when i forget how to properly scale svgs: https://css-tricks.com/scale-svg/ <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="50px" viewBox="0 0 500 500"> <defs> <g id="arrow"> <path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0 L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91 c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166 c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281 c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0 c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/> </g> </defs> <use x="0" y="0" style="fill: #333" xlink:href="#arrow" /> <use x="50" y="0" style="fill: #999" xlink:href="#arrow" /> </svg>
Like this? I just added transform="scale(0.1)" attribute to the g tag to make it 10x smaller <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="50px"> <defs> <g id="arrow" transform="scale(0.1)"> <path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0 L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91 c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166 c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281 c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0 c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/> </g> </defs> <use x="0" y="0" style="fill: #333" xlink:href="#arrow" /> <use x="50" y="0" style="fill: #999" xlink:href="#arrow" /> </svg>
How to Exclude Area inside of clippath in Svg
I want to hide anything that outside a rectangle. (this i have achieved with clipping successfully). but another condition is that, 'also hide anything that comes inside the black big circle'. Now how i can achieve that? in below example, 'yellow circle' must be eliminated'. see below images for detail Original:- Desired:- Below is my Svg code:- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <g> <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> <circle cx="180" cy="150" r="30" stroke="blue" /> </g> <g clip-path = "url(#clip1)"> <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" /> </g> <clipPath id = "clip1"> <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> </clipPath> </svg>
Erik Dahlström is right, your clip can include the entire rectangle and the cutout for the circle. This way, anything you associate with #clip1 as the clip-path will not be visible inside your circle area. Here is what it looks like for your example: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <g> <rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/> <circle cx="180" cy="150" r="30" stroke="blue" /> </g> <g clip-path = "url(#clip1)"> <circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" /> </g> <clipPath id = "clip1"> <path d="M 50,50 l200 0 l0 200 l-200 0z M150,150 a30,30 1 0,0 60,0z M210,150 a30,30 1 0,0 -60,0z"/> </clipPath>