I have clipped an svg image by rect, but now onclick on that clipped portion how to trigger an onclick event on the rect and not the image.
Here is my code:
http://jsfiddle.net/dnuboz21/
<div class="feature">
<img src="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg">
<svg class="glass">
<image id="svg-image" width="980" height="652" xlink:href="http://en.hdyo.org/assets/art-shutter-young-people-a12e2c0cd7a54920cb024fd1394190fd.jpg" clip-path="url(#svg-mask)" />
<filter id="svg-blur">
<feGaussianBlur stdDeviation="15" />
</filter>
<clipPath id="svg-mask">
<rect x="325" y="110" rx="40" ry="40" width="150" height="150" style="fill:none;stroke:red;stroke-width:5;opacity:0.7"/>
</clipPath>
</svg>
</div>
Related
Example below:
I'd like to maintain a fixed area in the middle that has svg circles being animated through it.
Most examples I've seen involve some sort of merge that ends up showing both the original circle and the blurred version. Led me to something like this:
<clipPath id="top-mask">
<rect id="top-mask-rect" x="0" y="-100" width="100" height="100" />
</clipPath>
<filter id="top-blur" x="-200%" y="-200%" width="500%" height="500%">
<feimage xlinkHref="url(#top-mask)" result="mask" />
<feGaussianBlur stdDeviation="1.5" result="blur" />
<feComposite in2="mask" in="blur" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
This seems to overlay the circles on top of a slightly blurred version. My next naive step was to remove the feComposite and instead apply clipPath to both feMergeNode which didn't work at all.
What is the correct approach to this problem?
Things are not that elementary. You have to stack things a bit on top of one another for this to work. You need a mask to show the un-blurred object outside, and a filter to show it inside the designated area. Both need units defined as userSpaceOnUse.
#moving {
animation: move 5s ease-in-out infinite;
}
#keyframes move {
0% { transform: translate(0px, 0px) }
50% { transform: translate(300px, 0px) }
100% { transform: translate(0px, 0px) }
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
height="300" width="500">
<defs>
<mask id="mask"
maskUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="white" />
<rect id="still" x="150" y="0" width="200" height="300" fill="black" />
</mask>
<filter id="blur" x="150" y="0" width="200" height="300"
filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
<g mask="url(#mask)">
<circle id="moving" r="60" cy="150" cx="100" fill="blue" />
</g>
<g filter="url(#blur)">
<use xlink:href="#moving" />
</g>
</svg>
The way the filter works is interesting. It seems the object is clipped before the blur is applied, resulting in a blur near the border of the designated area instead of a hard cut. I am unsure whether to call this a bug or expected behavior. (A quick test showed this both for Firefox and Chrome.)
I have a svg with clipping mask, animated with Greensock GSAP. (JS animates the CSS3 transform property)
Works fine in Chrome, Safari, IE, ... but not in Firefox.
HTML
<svg version="1.1" width="240" height="240" >
<defs>
<clipPath id="MASK_1">
<rect class="mask" x="60" y="60" width="100" height="100" />
</clipPath>
</defs>
<rect clip-path="url(#MASK_1)" x="0" y="0" width="240" height="240" />
</svg>
<br />mask animation in
<br />mask animation out
JavaScript
$('.btn-1').bind('click', function() {
TweenMax.to('.mask', 3, {scaleX: 0.5});
});
$('.btn-2').bind('click', function() {
TweenMax.to('.mask', 3, {scaleX: 1});
});
Test (Test in Chrome AND Firefox)
http://jsfiddle.net/drb2szbw/1/
Any ideas?
I'm basing my exercise on the accepted answer in: Creating transparent text to show gradient color of underlying div
Here's my rendition in jsfiddle: http://jsfiddle.net/skrln/zSjgL/
The svg code of my logo:
<svg width="190" height="121">
<mask id="cutouttext">
<rect width="190" height="121" x="0" y="0" fill="white" />
<path id="number-two" d="M75.3,56.1c7.3-3,14.2-12.5,14.2-24c0-17.7-15.1-32.1-36.8-32.1H0v121.5h52.4c30,0,43.4-16.5,43.4-36.8
C95.8,72.3,87,59.8,75.3,56.1z M66.5,94.6h-49V79.7h0.1l27-22.1c3.5-2.8,5.3-6.1,5.3-9c0-4-3.2-7.6-8.4-7.6c-6.4,0-9.1,5.7-10.2,9
l-14.6-3.9c2.9-10.8,11.8-19.1,25.2-19.1c14.4,0,24.5,9.4,24.5,21.5c0,12.4-9,18.1-17.1,23.8l-10.4,7.3h27.6V94.6z" />
<polygon id="filler" points="190,33.9 190,0 101.6,0 101.6,121.5 190,121.5 190,87.6 141.4,87.6 141.4,74.7 177.1,74.7 177.1,46.6
141.4,46.6 141.4,33.9 " />
</mask>
<rect width="190" height="121" x="0" y="0" fill="white" mask="url(#cutouttext)" />
</svg>
The result so far:
Issue:
The mask isn't behaving the way I want to; I want the inner parts of the "B" and "E" to mask out the gray underlying div so you can see the background image like the image below:
I'm having trouble knowing what part of the logo is the and which one is the . Also I can't seem to figure out the logic behind the <mask> in the SVG.
There's nothing wrong with your SVG. You placed it on a grey background, so the bits that are masked out are grey.
What you want to do is remove the grey background from below the SVG image. There may be neater ways of doing this, but one approach is to use a table layout with the logo in one cell and the grey background in another.
Here's a JSFiddle link
HTML
<div class="gray">
<svg width="190" height="121">
<mask id="cutouttext">
<rect width="190" height="121" x="0" y="0" fill="white" />
<path d="M75.3,56.1c7.3-3,14.2-12.5,14.2-24c0-17.7-15.1-32.1-36.8-32.1H0v121.5h52.4c30,0,43.4-16.5,43.4-36.8
C95.8,72.3,87,59.8,75.3,56.1z M66.5,94.6h-49V79.7h0.1l27-22.1c3.5-2.8,5.3-6.1,5.3-9c0-4-3.2-7.6-8.4-7.6c-6.4,0-9.1,5.7-10.2,9
l-14.6-3.9c2.9-10.8,11.8-19.1,25.2-19.1c14.4,0,24.5,9.4,24.5,21.5c0,12.4-9,18.1-17.1,23.8l-10.4,7.3h27.6V94.6z" />
<polygon points="190,33.9 190,0 101.6,0 101.6,121.5 190,121.5 190,87.6 141.4,87.6 141.4,74.7 177.1,74.7 177.1,46.6
141.4,46.6 141.4,33.9 " />
</mask>
<rect width="190" height="121" x="0" y="0" fill="white" mask="url(#cutouttext)" />
</svg>
<div></div>
</div>
CSS
.body {
background: #550000 url('http://sciencelakes.com/data_images/out/7/8788677-red-background-wallpaper.jpg');
display: block;
height: 500px;
margin: 0;
}
.gray {
display:table-row;
width:100%;
height:121px;
}
.gray div, .gray svg {
display:table-cell;
}
.gray div {
background:gray;
width:100%;
}
I want to put text on top of my polygons. unfortunately the text goes behind the shape is there anything similar to the css z index?
here is part of the svg in my html (its a lot of code because im drawing a map so here is only a little part of it.) Although below they all have the same coords, I did originally place them over the shape using the inspector in chrome, however the shapes remained above the text.
<svg width="400" height="800" viewBox="0 0 400 800" id="svg-doc">
<rect id="central-park" class="shape" x="154" y="370"width="53" height="127" />
<a xlink:href="/zipcodes/16">
<rect id="z10024" class="shape" x="68" y="415" width="85" height="40" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/17">
<rect id="z10023" class="shape" x="68" y="457" width="85" height="40" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/10">
<polygon id="z10034" class="shape" points="189,156 137,122 106,121 101,129 99,155 79,155 78,105 94,79 121,67 128,82 163,61 177,62 191,80" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/28">
<polygon id="z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/29">
<polygon id="z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" />
<text x="0" y="15" fill="#5df8b8">10024</text>
</a>
According to this site: http://alignedleft.com/tutorials/d3/an-svg-primer/
The order in which elements are coded determines their depth order.
In fact, the problem seems to be that all of your text is in the same place, at (0,15) - not underneath the polygons at all?
I edited the code from the question to move the text over the polygons, it is displayed correctly...
<svg width="400" height="800" viewBox="0 0 400 800" id="svg-doc">
<rect id="central-park" class="shape" x="154" y="370"width="53" height="127" />
<a xlink:href="/zipcodes/16">
<rect id="z10024" class="shape" x="68" y="415" width="85" height="40" />
<text x="70" y="450" fill="#5df8b8">10024</text>
</a>
<a xlink:href="/zipcodes/17">
<rect id="z10023" class="shape" x="68" y="457" width="85" height="40" />
<text x="70" y="480" fill="#5df8b8">10023</text>
</a>
<a xlink:href="/zipcodes/10">
<polygon id="z10034" class="shape" points="189,156 137,122 106,121 101,129 99,155 79,155 78,105 94,79 121,67 128,82 163,61 177,62 191,80" />
<text x="90" y="110" fill="#5df8b8">10034</text>
</a>
<a xlink:href="/zipcodes/28">
<polygon id="z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" />
<text x="120" y="160" fill="#5df8b8">10040</text>
</a>
<a xlink:href="/zipcodes/29">
<polygon id="z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" />
<text x="120" y="190" fill="#5df8b8">10033</text>
</a>
</svg>
I decided to play around re-making a nav menu in SVG. It looks quite a bit like this site's nav actually, so nothing much to imagine.
I'm drawing boxes with SVG and then placing text over them, enclosing them both in a link. By attaching a css class to the box, I can set a :hover attritbute, so I can change the background colour when the user hovers over it. The problem is, when the user hovers over the text the color change is reversed, even though the link still works.
How can I make the box change colour as well?
The code looks like this:
<svg width="640px" height="40px"
xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(60 20) ">
<a xlink:href="http://www.apple.com">
<rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
<text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
</a>
</g>
</svg>
What do your style rules look like?
Something like the following should work fine:
<svg width="640px" height="40px"
xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(60 20) ">
<a xlink:href="http://www.apple.com">
<rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
<text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
</a>
</g>
<g transform="translate(166 20) ">
<a xlink:href="http://www.apple.com">
<rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
<text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
</a>
</g>
<style>
g:hover .svg_nav { fill: blue }
g:hover .nav_text { fill: red }
.svg_nav { fill: yellow }
.nav_text { fill: black }
</style>
</svg>