I have a page like this , here I have two circles one with yellow color and one with red color , when placed simultaneously , the mouse events are not triggering means the underlying circle mouse event is hidden
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:2;">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="alert('yellow clicked')"/>
Sorry, your browser does not support inline SVG.
</svg>
<svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:1;">
<circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="brown" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="alert('red clicked')"/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
The svg elements have an attribute pointer-events, that controls whether an event is fired relating to that element. e.g. If you set pointer-events="none" on your top circle, it becomes transparent, so the event can occur at the bottom circle
<svg id="mySVG" width="400" height="400">
<circle onclick=alert() id=bottomCircle cx=200 cy=200 r=150 fill=red />
<circle pointer-events="none" id=topCircle cx=200 cy=200 r=130 fill=blue />
</svg>
It worked now
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg>
<svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:2;">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="alert('yellow clicked')"/>
Sorry, your browser does not support inline SVG.
</svg>
<svg width="100" height="100" style="position:fixed;top:50;left:40;z-index:1;">
<circle cx="50" cy="50" r="20" stroke="green" stroke-width="4" fill="brown" onmouseout="evt.target.setAttribute('opacity','1');" onmouseover="evt.target.setAttribute('opacity','0.5');" onclick="alert('red clicked')"/>
Sorry, your browser does not support inline SVG.
</svg>
</svg>
</body>
</html>
Related
I'm trying to make the entire SVG image background opaque.
All I could find on my search was how to make specific elements inside the image opaque, but I couldn't find anything regarding the background.
I know how to make the circle itself opaque/transparent, but not the background.
What do I need to add to make everything behind the circle opaque?
This is how the picture looks, note the white/grey squares indicating transparency
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>
Try this out
You can also refer this link for the same: https://www.geeksforgeeks.org/how-to-set-the-svg-background-color/
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
<rect width="100%" height="100%" fill="green" />
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>
I've edited this question because my previous one might actually reduce to this....why am I seeing nothing here when I expect to see a circle with filled with an image:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="100" height="100">
<defs>
<pattern patternUnits="userSpaceOnUse" height="100" width="100">
<image id="image-JON" x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
</image>
</pattern>
</defs>
<circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">
</circle>
</svg>
</body>
Solved, its the pattern tag that needs the ID, not the image tag:
<svg width="100" height="100">
<defs>
<pattern id="image-JON" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
</image>
</pattern>
</defs>
<circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">
</circle>
</svg>
Is it possible to implement transparent overlapping svg circle elements without circles border in transparent area?
You can clip the bits you don't want to draw...
<svg height="100" width="150">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<rect width="0.79" height="1.2" x="-0.1" y="-0.1"/>
</clipPath>
</defs>
<rect width="100%" height="100%" fill="blue" opacity="0.2" />
<circle cx="80" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" clip-path="url(#clip)"/>
</svg>
Check this link to view information about position absolute css code. I think this is what you are looking for. You might also want to view information about z-index. If you have any questions or want me to write some sample code for your problem let me know
svg{
position: absolute;
}
#svg-1{
top: 80px;
left: 20px;
}
#svg-2{
top: 80px;
left: 60px;
}
<svg id="svg-1" height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>
<svg id="svg-2" height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>
You can also use a <mask>.
I've used the same elements as #RobertLongson's answer so you can compare the approaches.
<svg height="100" width="150">
<defs>
<mask id="mask">
<!-- white rectangle to keep the area outside the circle -->
<rect width="100%" height="100%" fill="white"/>
<!-- black circle creates a "hole" to hide the part inside -->
<circle cx="50" cy="50" r="40" fill="black"/>
</mask>
</defs>
<rect width="100%" height="100%" fill="blue" opacity="0.2" />
<circle cx="80" cy="50" r="40" stroke="black" stroke-width="3" fill="none"
mask="url(#mask)"/>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none"/>
</svg>
Based on https://css-tricks.com/svg-symbol-good-choice-icons/
I have a representation of symbols taken from svg files. The original svgs have properties like x, y, height and width.
When adding the svgs to one svg file and making them symbols, I found that adding x, y height and width attributes to <symbol> is not valid svg.
I resolved the issue for height and width, by adding them in the style attribute of the <symbol> since that one is supported. My question is, how can I go about adding the x and y attributes to the <symbol>?
The final file, is composed of only one <svg> and multiple svg <symbol>
Example original file:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
File after changing it to symbol:
<svg style="display:none;">
<symbol id="circle" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</symbol>
</svg>
In the above width and height are not valid attributes for symbol.
The symbol is used the following way:
<svg>
<use xlink:href="#circle" />
</svg>
However, in the above, it doesn't expand to take the width and the height. I also tried nesting an svg inside the symbol like this and it also doesn't respect the height and width:
<svg style="display:none;">
<symbol id="circle">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</symbol>
</svg>
The <symbol> element does not have x, y, width or height attributes.
Your original file:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
should be converted to:
<svg style="display:none;">
<symbol id="circle">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</symbol>
</svg>
And then reference it with a <use> as follows. If the original SVG had width and height values, then they should go in the <use>.
<svg>
<use xlink:href="#circle" width="200" height="100"/>
</svg>
If you want to position the symbol, use x and y attributes, or a transform on the <use>.
<svg>
<use xlink:href="#circle" width="200" height="100" x="300" y="50"/>
</svg>
<svg>
<use xlink:href="#circle" width="200" height="100" transform="translate(300,50)"/>
</svg>
Note that <symbol> elements do support viewBox, so if your original SVG has a viewBox, it should be added to the symbol.
In Google Chrome 24, if an element referenced by a <use> element is defined later in the document it isn't rendered. I didn't notice anything related to element order in the documentation for the use element.
Is this behavior undefined and shouldn't be expected to be consistent across browsers or just a bug in Chrome?
An example of this can be seen below (slightly modified from this question). Blue circle renders as expected, red, not so much. Firefox 17 and IE 9 render both circles as I would expect. When the same content is referenced as an external <img />, both circles render as well.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome use-tag bug?</title>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<g id="test2">
<circle cx="50" cy="50" r="25" fill="blue"/>
</g>
</defs>
<g>
<rect x="0.5" y="0.5" width="199" height="199" stroke="black" fill="none"/>
<use xlink:href="#test1" x="0" y="0"/>
<use xlink:href="#test2" x="0" y="0"/>
</g>
<defs>
<g id="test1">
<circle cx="100" cy="100" r="25" fill="red"/>
</g>
</defs>
</svg>
</body>
</html>
UPDATE: Seems to be working in Chrome 39.
The Rendering Order depends on the element order, so it looks strong like a bug in chrome:
SVG Rendering Order 1.0, Part 2: Language