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)
Related
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>
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.
Who has an idea or a hint
I would like to embed a svg object inside die svg Tag and change this parameter
HTML/SVG (not going on)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<svg width="2000" height="2000">
<object type="image/svg+xml" data="lamp.svg" style="width: 450px; height:150px;">
<param name="color" value="yellow" />
</object>
</svg>
</body>
</html>
SVG File lamp.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40">
<title>lamp</title>
<circle cx="30" cy="30" r="15" fill="param(color)" stroke-width=""/>
</svg>
With the IMAGE TAG no tag parameter passing is possible.
<image x="0" y="0" width="20" height="20" xlink:href="lamp.svg"><param name="color" value="yellow" /></image>
Currently browsers don't support passing parameters this way, though there's an SVG Parameters spec being developed by W3C. The examples in the spec use a script to emulate support for the feature.
Note: the shim param.js goes in the SVG file, not the html file:
e.g.,
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68">
<rect x="10" y="10" height="48" width="48" stroke="black" stroke-width="1" fill="param(color) red">
</rect>
<rect x="29" y="0" height="10" width="10" fill="black"></rect>
<text x="24" y="46" fill="param(text) black" style="font-size:32px;"
content-value="param(number) 1">1</text>
<script type="text/ecmascript" xlink:href="param.js" />
</svg>
I'm using Chrome version 5.0.375.55 and Firefox version 3.5.9 but I can't get the HTML5 code below to display a box.
<!DOCTYPE html> <!-- this tells browser, this is HTML5 -->
<html>
<body>
<svg width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>
The following sites stated that my browsers support HTML5 and svg so what gives?
http://caniuse.com/
http://www.html5test.com/
This is how I got it to work
I called the file test.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>
Good luck!
Have you tried using the SVG XML namespace for your tags? Like so:
<html xmlns:svg="http://www.w3.org/2000/svg">
<!-- ... -->
<svg:svg width="200" height="200">
<svg:rect
x="0" y="0"
width="100" height="100"
fill="blue" stroke="red"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg:svg>
</html>
it worked by saving the file as xhtml, but I'm not sure why.
try in Firefox about:config, search for html and enable "true" value. What next? Wait will Firefox 4.
As for WebKit please read: http://trac.webkit.org/wiki/WebKit%20plus%20SVG. You are not alone. I'm also waiting for SVG.
Firefox 4 will support SVG in HTML. WebKit will probably start working on it in the coming months.