Sorry if I'm not going about this the right way. I am trying to embed HTML within an SVG shape, and trying to center align the HTML with the shape.
Here is my code:
<svg xmlns = "http://www.w3.org/2000/svg" class="shape1" width="200" height="200" style="margin-top:-100px;">
<circle cx="100" cy="50" r="100" fill="white">
</circle>
<foreignObject x="0" y="80" width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<h3 style="font-family:'myriad Pro' ">HOME</h3>
</div>
</body>
</foreignObject>
</svg>
As it stands, I have to do it manually, but it does not seem to be consistent across Chrome and Firefox.
Related
The goal is to show image but with another color inside svg.
I tried -webkit-mask-image with background-color, but this combination does not work in svg. Here is the example:
<div class="dashboard-buttons">
<svg width="367" height="243.5" viewBox="252.5 60.5 367 243.5">
<g>
<rect width="46" height="46" rx="4" ry="4" transform="translate(-23, -23)" style="fill:white" x="560" y="224"></rect>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3" href="#element3" onclick="window.location.href = '#element3';">
<image height="32" width="32" transform="translate(-16, -16)" x="560" y="224" style="background-color: Red; -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==');width: 32px; height: 32px;"></image>
</a>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3"><text filter="url(#fillbackground)" x="560" y="257">out</text></a>
</g>
</svg>
</div>
If you remove svg tags from it then this sample works and the color changed.
Do you know how to change image color inside svg correctly?
EDIT:
The following code works in Chrome, but not in Firefox:
<div class="wrapper">
<svg width="200" height="300" class="svg">
<defs>
<mask id="mask">
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==">
</image>
</mask>
</defs>
<rect width="50" height="50" style="fill:blue;" x="0" y="0"
mask="url(#mask)"></rect>
</svg>
</div>
Can't see your example, but:
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
fill-opacity="0.5" stroke-opacity="0.8"/>
Use the fill option!
EDIT:
Now I can see your code.
If you insert an image as PNG:
data:image/png
Then I doubt you can change the color with HTML directive. PNG are bitmaps and not SVG, you would have to edit the PNG itself to achieve that.
my svg is just text over a circke with full screen rectangle
svg
<svg version="1.1"
baseProfile="full"
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">Hello SVG</text>
</svg>
When in img src it is arbitriraly truncated at the bottom why ? How to fix this ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<img src="hello.svg" type="image/svg+xml">
</body>
</html>
Specify the width, height and viewPort attributes of svg.
<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" 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">Hello SVG</text>
</svg>
You have not specified any size for the <img> or <svg> so the browser is choosing the default size for indeterminate sized objects, which is 300x150. So your circle will get cut off at the bottom. The solution, as chipChocolate has already pointed out, is to give one or the other an appropriate size.
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.
Is there a way - preferably without using JavaScript - to put some HTML contents into an SVG shape using foreignObject, such that the SVG shape will auto-resize (or scale) to fit its contents?
I.e. something very vaguely like this pseudocode example, but valid, and functional in the way I've described:
<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
<rect x="10" y="10" width="SCALE_TO_FIT_CONTENTS" height="SCALE_TO_FIT_CONTENTS" fill="gray">
<foreignobject width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>Some HTML text</div>
</body>
</foreignobject>
</rect>
</svg>
without using javascript, there is no possible way you could do that. In fact, the SVG shapes cannot be used as containers. But, I hope this is what you're asking for:
<script type="text/javascript">
function myFun(){
var w = document.getElementById("myDiv").scrollWidth;
document.getElementById("myRect").setAttribute("width",w);
}
</script>
<svg xmlns = "http://www.w3.org/2000/svg" onload="myFun()">
<rect id="myRect" x="10" y="10" width="0" height="100" fill="red"></rect>
<foreignObject x="10" y="10" position="absolute" width="100%" height="100%">
<div id="myDiv" style="display: inline-block;">Some HTML text that resizes its SVG container</div>
</foreignObject>
</svg>
A nice trick would be to wrap everything in a <g> element and then measure that element using getBBox() and then the height of the inner content is known, and could be used to modify the parent SVG element's height.
var svg = document.querySelector('svg');
var bbox = svg.firstElementChild.getBBox();
svg.setAttribute("height", bbox.height + "px");
<svg>
<g>
<rect x="10" y="10" width="100" height="200px" fill="red"></rect>
<foreignObject x="10" y="500" position="absolute" width="100%" height="100%">
<div id="myDiv" style="display: inline-block;">Some HTML text that resizes its SVG container</div>
</foreignObject>
<text dy='500'>aaaaaaaaa</text>
</g>
</svg>