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.
Related
I have corresponding html code:
<html>
<body>
<svg>
<g class="projectGroup">
<g class="projectElement">
<rect width="10" height="10" y="0" style="fill:rgb(0,0,255);" />
<g class="projectElement">
<rect width="10" height="10" y="15" style="fill:rgb(0,0,255);" />
<g class="projectElement">
<rect width="10" height="10" y="30" style="fill:rgb(0,0,255);" />
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
and hovering css:
.projectElement:hover > rect {
width:100px;
}
try this on JSFiddle
why the hover is affecting the parent groups? I just want to affect one particular rect in group
Look at this one. Actually I dont't understand .projectElement:hover > rect:hover meaning, but it works !!!
.projectElement:hover > rect:hover {
width:100px;
}
<html>
<body>
<svg>
<g class="projectGroup">
<g class="projectElement">
<rect width="10" height="10" y="0" style="fill:rgb(0,0,255);" />
<g class="projectElement">
<rect width="10" height="10" y="15" style="fill:rgb(0,0,255);" />
<g class="projectElement">
<rect width="10" height="10" y="30" style="fill:rgb(0,0,255);" />
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
If you change the way the SVG elements are nested, such that each .projectElement node is a sibling of each other, then you can get the effect you desire.
The problem is that CSS is surrounding each nested node with its parent, so hovering over a child means you are also hover over its parent.
Using siblings instead of ancestors allows the CSS to consider each element in it's own context.
.projectElement:hover > rect {
width:100px;
}
<html>
<body>
<svg>
<g class="projectGroup">
<g class="projectElement">
<rect width="10" height="10" y="0" style="fill:rgb(0,0,255);" />
</g>
<g class="projectElement">
<rect width="10" height="10" y="15" style="fill:rgb(0,0,255);" />
</g>
<g class="projectElement">
<rect width="10" height="10" y="30" style="fill:rgb(0,0,255);" />
</g>
</g>
</svg>
</body>
</html>
But what if nested tags are really desired? SVG Group tag is exact example of such nessesity. And each nested inner tag should have the same visual appearance.
Take a look. If marking the n-th nested element is possible, why we can't mark the actually hovered tag?
.red {
color: green;
}
.red:first-of-type {
color: red;
}
<div class="home">
<p class="red">first
<p class="red">second
<p class="red">third
<p class="red">fourth</p>
</p>
</p>
</p>
</div>
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>
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>
<clipPath id="clip1">
<rect x="10" y="222" height="30" width="50" rx="5" />
</clipPath>
<image .... clip-path="url(#clip1)" />
It cuts the outer space of the image. But I want to cut a hole into the image. How can I achieve it?
For your purposes, you can use a mask
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<rect x="50" y="50" height="50" width="100" rx="5" fill="black" />
</mask>
</defs>
<image x="0" y="0" width="200" height="200"
xlink:href="http://placeimg.com/200/200/any"
mask="url(#hole)" >
</image>
</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>