I have an SVG with nested SVGs inside of it that are wrapped inside various <a> tags. I would like the entire nested SVG to activate the link (i.e. be clickable), but it seems I cannot use the CSS property pointer-events: bounding-box as that value isn't supported by Safari & Firefox. (This works great in Chrome, however).
What other approach could I use to simulate this behavior in these browsers?
Cover each SVG with a transparent <rect> and wrap that with the link element.
<svg width="300" height="200">
<a xlink:href="http://www.google.com">
<svg x="50" y="50" width="200" height="100">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red"/>
</svg>
</a>
</svg>
<svg width="300" height="200">
<svg x="50" y="50" width="200" height="100">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="green"/>
</svg>
<a xlink:href="http://www.google.com">
<rect x="50" y="50" width="200" height="100" fill="transparent"/>
</a>
</svg>
Related
So I've created a page with some colorful SVG images in it, and I want them to be grayed at hormal state, and shows color while hovered.
svg {
width: 200px;
margin: 50px;
}
svg * {
transition: fill 1s;
}
svg:not(:hover) * {
fill: gray !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<g>
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</g>
</svg>
As one can see, SVGs have different colored elements, also some elements are grouped. This is pretty simplified example, but the real images are much more complex, with massive transform-s so I can't easily remove grouping.
Both images work perfect and changes colors while hovered, but the first image does it instantly while the the second has 1 second delay before animation starts.
Searching for the solution I've found that if an elemend is wrapped with a single <g> tag it has the animation delay, but if there no <g> or two of them, no delay occurs.
Firefox animates both images with no animation delay.
By the moment I ungrouped elements by hands, but obviously it's not a good solution, so the question is how it can be solved without changing files at all ?
A pretty sneaky bug, but easily solved: just restrict the child selector to non-g elements:
svg {
width: 200px;
margin: 50px;
}
svg :not(g) {
transition: fill 1s;
}
svg:not(:hover) * {
fill: gray !important;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 1">
<g>
<rect x="0" y="0" width="1" height="1" style="fill: red" />
<rect x="1" y="0" width="1" height="1" style="fill: green" />
<rect x="2" y="0" width="1" height="1" style="fill: blue" />
</g>
</svg>
I have an SVG with four coloured blocks that I want to clip by a rotated ellipse. It works as expected in Chrome and Safari, but Firefox (63.0.3 on Mac) ignores the transformation of the ellipse.
Here is a CodePen that illustrates the issue.
SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 500 500">
<defs>
<clipPath id="myClip">
<ellipse id = "ellipse" cx="250" cy="250" rx="200" ry="100" />
</clipPath>
</defs>
<g class="clip-this">
<rect class="color-1" x="0" y="0" width="250" height="250" />
<rect class="color-2" x="250" y="0" width="250" height="250" />
<rect class="color-3" x="0" y="250" width="250" height="250" />
<rect class="color-4" x="250" y="250" width="250" height="250" />
</g>
</svg>
CSS
#ellipse{
transform:rotate(-30deg);
transform-origin:center;
}
.color-1,.color-4{
fill:#ababab;
}
.color-2,.color-3{
fill:#3a3a3a;
}
svg {
max-width: 400px;
}
.clip-this{
clip-path: url(#myClip);
}
This is a known bug. As a workaround, you can use the SVG transform attribute instead of the CSS property. Note that for full browser compatibility the transform function must not have units for the numbers, and the center of rotation is noted in userspace coordinates.
.color-1,.color-4{
fill:#ababab;
}
.color-2,.color-3{
fill:#3a3a3a;
}
svg {
max-width: 400px;
}
.clip-this{
clip-path: url(#myClip);
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 500 500">
<defs>
<clipPath id="myClip">
<ellipse id = "ellipse" cx="250" cy="250" rx="200" ry="100" transform="rotate(-30, 250, 250)" />
</clipPath>
</defs>
<g class="clip-this">
<rect class="color-1" x="0" y="0" width="250" height="250" />
<rect class="color-2" x="250" y="0" width="250" height="250" />
<rect class="color-3" x="0" y="250" width="250" height="250" />
<rect class="color-4" x="250" y="250" width="250" height="250" />
</g>
</svg>
I'm trying to make an SVG image where I use one group of shapes as a mask for another.
Basically I want a group of transparent shapes that overlay a bigger shape and clip it, so you can see the page background through them (because they're transparent) but not the bigger shape's fill or stroke.
I tried applying a mask to the big shape that has a tag pointing to the #overlays group but it doesn't seem to work. Pointing the to an individual overlay DOES work but I don't want to put in a for every overlay.
Codepen: http://codepen.io/nathancox/pen/YPgZPR?editors=110
The top shape is the SVG, the bottom one is an image of what I'm trying to get it to do.
Here's the SVG:
<svg>
<defs>
<mask id="clip-behind" >
<rect id="bg" x="0" y="0" width="100%" height="100%" fill="white"/>
<use xlink:href="#overlays" fill='black' fill-opacity='1' />
</mask>
</defs>
<rect
mask="url(#clip-behind)"
width="260" height="270" x="50" y="50"
fill='none' stroke-opacity='1' stroke='black' stroke-width='4'
/>
<g id="overlays" fill='red' fill-opacity='0.25' stroke-opacity='1' stroke='red'>
<rect id='overlay1' width="80" height="80" x="280" y="150" />
<rect id='overlay2' width="50" height="50" x="140" y="300" />
</g>
</svg>
Anybody know what I'm doing wrong, or if there's a better approach?
You won't be able to do it this way, <mask> uses alpha-channel to determine the opacity of masking ( black is clipped and white left ).
So in order to avoid semi-transparence of red mask, and because you can't change the already set fill property of elements contained in a <g> copied with <use>, you will have to link for an in <defs> <g>, without attribute, in the <mask> and in the document, and set their respective attributes then :
Really transparent :
body {
background-color: #fff;
background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
background-size: 100% 1.2em;
}
svg {
width: 400px;
height: 400px;
}
<div id='container'>
<svg>
<defs>
<g id="overlays">
<rect id='overlay1' width="80" height="80" x="280" y="150" />
<rect id='overlay2' width="50" height="50" x="140" y="300" />
</g>
<mask id="clip-behind">
<rect id="bg" x="0" y="0" width="100%" height="100%" fill="white" />
<use xlink:href="#overlays"/>
</mask>
</defs>
<rect mask="url(#clip-behind)" width="260" height="270" x="50" y="50" fill='none' stroke-opacity='1' stroke='black' stroke-width='4' />
<use xlink:href="#overlays" fill='red' fill-opacity='0.25' stroke-opacity='1' stroke='red' />
</svg>
<img src='https://dl.dropboxusercontent.com/u/587097/desired.png' />
</div>
Semi-transparent :
body {
background-color: #fff;
background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
background-size: 100% 1.2em;
}
svg {
width: 400px;
height: 400px;
}
<div id='container'>
<svg>
<defs>
<mask id="clip-behind">
<rect id="bg" x="0" y="0" width="100%" height="100%" fill="white" />
<!-- changed the fill-opacity to make it more obvious -->
<g id="overlays" fill='red' fill-opacity='0.8' stroke-opacity='1' stroke='red'>
<rect id='overlay1' width="80" height="80" x="280" y="150" />
<rect id='overlay2' width="50" height="50" x="140" y="300" />
</g>
</mask>
</defs>
<rect mask="url(#clip-behind)" width="260" height="270" x="50" y="50" fill='none' stroke-opacity='1' stroke='black' stroke-width='4' />
</svg>
</div>
<use xlink:href="#overlays" fill="black" fill-opacity="1"> displayed in normal view :
(still red semi-transparent)
body {
background-color: #fff;
background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
background-size: 100% 1.2em;
}
svg {
width: 400px;
height: 400px;
}
<div id='container'>
<svg>
<defs>
<g id="overlays" fill='red' fill-opacity='0.25' stroke-opacity='1' stroke='red'>
<rect id='overlay1' width="80" height="80" x="280" y="150" />
<rect id='overlay2' width="50" height="50" x="140" y="300" />
</g>
</defs>
<rect width="260" height="270" x="50" y="50" fill='none' stroke-opacity='1' stroke='black' stroke-width='4' />
<use xlink:href="#overlays" fill="black" fill-opacity="1" />
</svg>
</div>
How can I make the black background of the div visible?
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
<div style="background:black;color:white;margin-top:-50px;">
<h1>Hello Plunker!</h1>
</div>
http://plnkr.co/edit/rHlE2AdfkR81zVjE3oez?p=preview
Thanks.
Give relative position to black div.
Link.
I have a page that's divided into 3 sections. A top bar with several buttons, a large middle section and a bottom bar with more buttons. And on top of everything several floating windows that will open and close depending on the buttons clicked (ignorable for this problem).
The requested structure is the middle section must be an empty div that will load several other pages through jquery. Some of those pages have interactive elements, so it must accept mouse events, despite the div having the lowest z-index of all the page elements.
The buttons on the top and bottom bars must all be svg elements, both because of the vectorial properties and the occasional odd shapes. And they must have a higher z-index than the middle div at all times.
My problem is the svg is covering the middle div and blocking all interactions (in this case a simple alert when you click on the div), although none of the visual elements overlap.
I've tried to call 2 different svgs, one for each bar, but the 2nd never shows up. I've also tried calling the 2 svgs inside a main svg and include the div inside as well, but it didn't work too.
This is an example of how it currently looks (the absolute positions, z-indexes and styles are defined in a css):
<div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<svg id="topBar" class="topBar" x="0" y="0">
<rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
<svg id="bottomBar" class="bottomBar" x="0" y="500">
<rect id="btn_3" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_4" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
</svg>
This was the 1st solution attempt:
<div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>
<svg id="topBar" class="topBar" x="0" y="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
<svg id="bottomBar" class="bottomBar" x="0" y="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
And this was the 2nd solution attempt:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<svg id="topBar" class="topBar" x="0" y="0">
<rect id="btn_1" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_2" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
<div id="middleDiv" class="middleDiv" onClick="alert(1)">< /div>
<svg id="bottomBar" class="bottomBar" x="0" y="500">
<rect id="btn_3" class="topBtn" x="0" y="0" height="30" width="100"/>
<rect id="btn_4" class="topBtn" x="100" y="0" height="30" width="100"/>
</svg>
</svg>
Firstly you should specify width and height attributes for the <svg> elements. If you're using Chrome it incorrectly makes them the size of the page if you omit such attributes and this may be your entire issue.
If that doesn't work then add pointer-events="none" to prevent the <svg> elements intercepting mouse clicks.