I am trying to draw a rectangle inside a rectangle using svg, but I am not seeing the inner rectangle. Could somebody help me what is the mistake I am doing ?? The code is as below.
<html>
<body>
<h1>My first SVG</h1>
<svg width="700" height="200">
<rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)">
<rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
</rect>
</svg>
</body>
</html>
Thanks in advance
Just draw a rectangle on the top of another:
They will be drawn in the same order as you write in your code.
<html>
<body>
<h1>My first SVG</h1>
<svg width="700" height="200">
<rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
<rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
</svg>
</body>
</html>
try this code
<svg width="700" height="200">
<rect height="100" width="200"stroke-width:1 stroke:rgb(0,0,0)"></rect>
<rect height="50" width="100" style="fill:rgb(242,242,242);stroke-width:1;stroke:rgb(0,0,0)</rect>
</svg>
note: it will draw overlapping rectangles as you maintain the order of rect.
Related
I can't seem to get a foreignObject to work from within an SVG pattern. I can get it to work on its own, but not in a pattern. I've had a quick look around:
its listed as a valid content element for a pattern in SVG 1.1 and SVG 2.0
Its used in this accepted answer
Something about not allowing foreignObject and svg:use, but I don't know if its relevant
so I'm at a loss really what I'm doing wrong. I've added a contrived snippet to reproduce below, but I'm specifically interested in arbitrary html in a foreignObject, in a pattern.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style>
</head>
<body>
<svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg">
<!-- doesn't work -->
<pattern id=tex width=100 height=100>
<foreignObject x="0" y="0" width="100" height="100">
<img xmlns="http://www.w3.org/1999/xhtml" src="https://i.picsum.photos/id/258/200/200.jpg" x="0" y="0" width="100" height="100" />
</foreignObject>
</pattern>
<pattern id=tex2 width=100 height=100>
<circle fill=blue cx=50 cy=50 r=50 width=100 height=100></circle>
</pattern>
<!-- foreignObject on its own works -->
<foreignObject x="0" y="0" width="200" height="100">
<img xmlns="http://www.w3.org/1999/xhtml" src="https://i.picsum.photos/id/258/200/200.jpg" x="0" y="0" width="100" height="100" />
</foreignObject>
<!-- pattern with foreignObject doesn't work-->
<rect fill="url(#tex)" stroke="black" x=0 y=100 width="100" height="100"/>
<!-- basic pattern works-->
<rect fill="url(#tex2)" stroke="black" x=0 y=200 width="100" height="100"/>
</svg>
</body>
</html>
I’m afraid it looks like browsers don’t support this, even though the spec says it’s valid.
https://bugzilla-dev.allizom.org/show_bug.cgi?id=1348768
https://bugzilla-dev.allizom.org/show_bug.cgi?id=486240
Here’s another demo of the issue from 2014 codepen.io/yoksel/details/BidHq (SO won’t let me post the link without accompanying code, but the code is irrelevant in this case)
I don't know how to make rect element with 2-sided radius only, please find the exhibit:
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="180">
<rect x="50" y="20" rx="1" ry="50" width="30" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
My code below is not working as expected. Not showing the image in the background of the rectangle.
<html>
<body>
<svg width="600" height="700">
<rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction" style="fill:url(#godhelpme);">
<title stroke="blue">My test</title>
</rect>
<defs id="godhelpme">
<pattern width="200" height="200" x="0" y="0" patternUnits="userSpaceOnUse">
<image width="200" height="200" class="eq__NEcontainer__currentAlarmAction" xlink:href="CurrentList.png"></image>
</pattern>
</defs>
</svg>
</body>
</html>
The rectangle is always black as in the image. Any ideas ?. I have tried debugging using chrome. In the debugger clicking on the image tag shows empty. I have attached the images for reference.. Any help would be of greatly appreciated.
You cannot reference a <defs> element as the fill, you want the <pattern>. So put the id on the <pattern> element instead. Also in general you should aim to put your <defs> elements before where they're used, it's more efficient that way.
Like this:
<html>
<body>
<svg width="600" height="700">
<defs>
<pattern id="godhelpme" width="200" height="200" x="0" y="0"
patternUnits="userSpaceOnUse">
<image width="200" height="200"
class="eq__NEcontainer__currentAlarmAction"
xlink:href="CurrentList.png"></image>
</pattern>
</defs>
<rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction"
style="fill:url(#godhelpme);">
<title stroke="blue">My test</title>
</rect>
</svg>
</body>
</html>
My goal is to cut out a rectangular area of a photo using an svg mask in html5. I have attempted to implement this using the code below and in this fiddle, to no avail. Can anyone tell me what I'm doing wrong?
html:
<body>
<svg id="svg-rect" width="50px" height="50px">
<defs>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect width="100%" height="100%" />
</mask>
</defs>
</svg>
<!--<svg id="svg-rect" width="50px" height="50px">
<rect width="100%" height="100%" />
</svg>-->
<img src="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg"/>
</body>
css:
img {
mask: url(#masking);
position:absolute;
top:0px;
left:0px;
}
#svg-rect{
position:absolute;
top:50px;
left:60px;
z-index:2;
}
Applying SVG effects to HTML only works in Firefox. You have to use -webkit-mask in Chrome/Safari and that's been deprecated. Next, you have to fill your rectangle with a color for the mask to take effect. And there is a bug in firefox, where you have to specify the x/y offset for a rect in a mask in decimal form, %'s won't work. Change your rect definition to:
<rect x=".2" y=".2" width=".25" height=".25" fill="white" />
And you'll see a mask effect (in Firefox only)
or... to invert the mask, use an empty fill and a solid stroke
<rect x="0" y="0" width="1" height="1" stroke="white" stroke-width=".4" />
The best way to do this for maximum compatibility, however, is to use inline SVG all the way, and just do your image content in SVG using the SVG image tag.
Elaborating on Michaels' last point, here's how you would do it in a pure SVG way.
<svg width="235" height="314" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="masking">
<rect width="100%" height="100%" fill="white" />
<rect x="60px" y="50px" width="50px" height="50px" fill="black" />
</mask>
</defs>
<image width="235" height="314"
mask="url(#masking)"
xlink:href="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg" />
</svg>
Fiddle here
Is it possible to put a div inside an svg shape?
Here's an example of what I'm trying to do:
<!DOCTYPE html>
<html>
<body xmlns="http://www.w3.org/1999/xhtml">
<svg id="main" xmlns="http://www.w3.org/2000/svg" version="1.1">
<foreignObject x="10" y="10" width="100" height="150">
<div>I'm a div in an svg</div>
</foreignObject>
<rect fill="red" stroke="darkred" class="box" x="90" y="90" rx="20" ry="20" width="320" height="320" id="box_0">
<foreignObject width="100" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>Hi, I'm a div inside a shape!! I don't work :(</div>
</body>
</foreignObject>
</rect>
</svg>
</body>
</html>
The second <div> doesn't show, is this somehow doable?
A <rect> element cannot have a <foreignObject> element as a child. You'd have to make the <foreignObject> element a later sibling and locate it on top of the rect element.