Scale SVG shape to fit to contents, where contents includes foreignObject - html

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>

Related

using SVG from sprite in a background

My goal is to use SVG in repeated background, but I need to be able to change its fill color in CSS for usage in the different parts of the website.
As far as my understanding of the SVG, it can't be laoded as an external file (background:url(image.svg)), because then I am not able to change the CSS property like fill proeprty of it. On the other hand, SVG can't be inlined in HTML (<svg>...</svg>) as then I am not able to use/reference it in background property.
Please correct me if I am wrong, or do you have any solution for this?

As far as my understanding of the SVG, it can't be laoded as an
external file (background:url(image.svg)), because then I am not able
to change the CSS property like fill proeprty of it.
Consider using CSS filters to change svg coloration instead of fill
In the example below the svg file is loaded as an external file:
background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
and its color will be changed on hover using a combination of css filters
You can get the desired combination of filters for a specific color using the utility
https://codepen.io/sosuke/pen/Pjoqqp
Hover to change color
.android {
display:inline-block;
width:96px;
height:105px;
background-image:url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg);
}
.android.blue:hover {
filter: invert(8%) sepia(99%) saturate(7454%) hue-rotate(248deg) brightness(100%) contrast(143%);
}
.android.red:hover {
filter: invert(25%) sepia(100%) saturate(7420%) hue-rotate(6deg) brightness(98%) contrast(122%);
}
.android.gold:hover {
filter: invert(50%) sepia(31%) saturate(3357%) hue-rotate(113deg) brightness(99%) contrast(101%);
}
<div class="android blue">
</div>
<div class="android red">
</div>
<div class="android gold">
</div>

Ok so it's not super simple but, it can be done with some work to the SVG itself. if you look at the simple example you will see inside the tag under the you can essentially make a pattern of any SVG elements like a circle,rect, or a path.
So make the pattern as
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
make sure the width and height are the same as your SVG or it will cut it off
then outside of the defs you can make a rect object with the fill of your pattern fill="url(#dots)" this must use the id of the pattern
Simple example
.pattern {
background-color: #2e4057;
height: 100vh;
}
<div class="pattern">
<svg width="100%" height="100%">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="25">
</circle>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"></rect>
</div>
More advanced SVG
.pattern {
background-color: #2e4057;
height: 100vh;
}
<div class="pattern">
<svg width="100%" height="100%">
<defs>
<pattern id="duck" x="0" y="0" width="209" height="209" patternUnits="userSpaceOnUse">
<g>
<path fill="red" d="M105.572,101.811c9.889-6.368,27.417-16.464,28.106-42.166c0.536-20.278-9.971-49.506-49.155-50.878
C53.041,7.659,39.9,28.251,36.071,46.739l-0.928-0.126c-1.932,0-3.438,1.28-5.34,2.889c-2.084,1.784-4.683,3.979-7.792,4.308
c-3.573,0.361-8.111-1.206-11.698-2.449c-4.193-1.431-6.624-2.047-8.265-0.759c-1.503,1.163-2.178,3.262-2.028,6.226
c0.331,6.326,4.971,18.917,16.016,25.778c7.67,4.765,16.248,5.482,20.681,5.482c0.006,0,0.006,0,0.006,0
c2.37,0,4.945-0.239,7.388-0.726c2.741,4.218,5.228,7.476,6.037,9.752c2.054,5.851-27.848,25.087-27.848,55.01
c0,29.916,22.013,48.475,56.727,48.475h55.004c30.593,0,70.814-29.908,75.291-92.48C180.781,132.191,167.028,98.15,105.572,101.811
z M18.941,77.945C8.775,71.617,4.992,58.922,5.294,55.525c0.897,0.24,2.194,0.689,3.228,1.042
c4.105,1.415,9.416,3.228,14.068,2.707c4.799-0.499,8.253-3.437,10.778-5.574c0.607-0.509,1.393-1.176,1.872-1.491
c0.87,0.315,0.962,0.693,1.176,3.14c0.196,2.26,0.473,5.37,2.362,9.006c1.437,2.761,3.581,5.705,5.646,8.542
c1.701,2.336,4.278,5.871,4.535,6.404c-0.445,1.184-4.907,3.282-12.229,3.282C30.177,82.591,23.69,80.904,18.941,77.945z
M56.86,49.368c0-4.938,4.001-8.943,8.931-8.943c4.941,0,8.942,4.005,8.942,8.943c0,4.931-4.001,8.942-8.942,8.942
C60.854,58.311,56.86,54.299,56.86,49.368z M149.159,155.398l-20.63,11.169l13.408,9.293c0,0-49.854,15.813-72.198-6.885
c-11.006-11.16-13.06-28.533,4.124-38.84c17.184-10.312,84.609,3.943,84.609,3.943L134.295,147.8L149.159,155.398z"/>
</g>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#duck)"></rect>
</svg>
hope this helps
a more complete tutorial here

resize svg wrapped in div that is wrapped in div

I'm having a problem coverting inline SVG to be wrapped in divs. I was using nested SVGs before and now I'm told I have to use nested divs with inline SVG.
Basically, I need the SVG to be sized to the "container" - the "container" is size to the browser window.
For an example of what works before I tried the whole div thing:
SVG Only Example - works perfectly
<html>
<body>
<svg id="container" style="position:relative;border:dashed;width:100%;height:100%;" viewBox="0 0 1000 500">
<svg id="background" name="Box" x="0" y="0">
<rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
<svg id="shape" name="Triangle" x="275" y="50" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</svg>
</svg>
</body>
</html>
But when I try to wrap divs around them, it just stays the same size as my viewBox, no matter what I've tried. I've looked up a lot on this on SO and elsewhere and nothing seems to work: padding tricks, 100vw, width, height, etc.
Here's the latest of what I've tried:
SVG wrapped in DIV Example - doesn't behave the same
<html>
<body>
<div id="container" style="position:relative;border:dashed;width:100%;height:0;margin:5px">
<div id="background" style="position:absolute;left:0px;top:0px;width:1000px;height:500px;">
<svg name="Box" viewBox="0 0 1000 500">
<rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;left:275px;top:50px;width:371px;height:378px;">
<svg name="Triangle" viewBox="0 0 371 378" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</div>
</div>
</body>
</html>
I put a "border:dashed;" in the first div, just to make sure it is resizing with the browswer window and it is. It's just that everything inside that div doesn't change.
Any advice on how to get the "wrapped in div" strategy to match the "plain SVG" strategy?
More clarity:
I guess what I'm saying is that "background" shape needs to be 1000w x 500h, relative to the "container" size. Any of it's children need to be absolutely positioned inside of that 1000w 500h and relative to it. The "container" size is the available space. So if if the browser window is 3000w x 2000h, then technically the "background" shape should be 3000w x 1500h (and the child shapes resize accordingly too - but the stay in their original relative position - relative to 1000w x 500h). If the window 800 w by 600 h, the "background" and child shapes shrink to fit that, relatively. Just like the SVG example.
It might be helpful to take the SVG example above, save it as an html file, launch locally and resize your browser up and down. That's what I'm to find help with, but divs don't seem to know how to handle this.

There's no real equivalent to viewBox property of SVG on DIV elements. The closest one would transform scale. So if you give your div containers a specific size in pixel without adjusting on resize, you're going to somewhat override the viewbox calculations.
That being said, if your div containers are resized with the window, then it can work. Also with minimal javascript you can get the same result as viewbox.
For the css only solution, you define your div containers so they are 100% the size of the window. The SVG viewbox is then still making the calculations. You'll need to define a preserveAspectRatio to have the same behavior as your SVG example. Like this:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin:0px;
}
* {
box-sizing: border-box;
}
<div id="container" style="position:relative;border:dashed;width:100%;height:100%;">
<svg name="Box" style="position:relative;width:100%;height:100%;" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin">
<rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;left:0px;top:0px;height:100%;width:100%;">
<svg style="position:relative;width:100%;height:100%;" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin">
<svg id="shape" name="Triangle" x="275" y="50" width="371" height="378" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</svg>
</div>
</div>
For the javascript solution, you define the size on your div containers, and your svg can then be relative and not have the positioning info. And on resize you adjust the scale based on the innerWidth. Like this:
window.onload = window.onresize = calculateScale
function calculateScale() {
var scaleFactor = innerWidth / 1000;
document.getElementById('container').style.transform = `scale(${scaleFactor})`
}
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
* {
box-sizing: border-box;
}
<div id="container" style="position:absolute;border:dashed;width:1000px;height:500px;transform-origin: left top">
<svg name="Box" style="position:relative;width:100%;height:100%;">
<rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;width: 371px;height: 378px;top: 50px;left: 275px;">
<svg style="width: 100%; height: 100%" id="shape" name="Triangle" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</div>

I think I got what you are looking for but this is two different svgs not the same vector image.
I'm wrapping both svgs with a div and im overlaying the second div using an absolute position.
<html>
<body>
<div id="containerouter" style="position:relative;border:dashed;width:100%;height:100%;margin:0;">
<div id="background" style="position:relative;width:100%;height:100%;">
<svg name="Box" viewBox="0 0 1000 500">
<rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
</svg>
</div>
<div id="shape" style="position:absolute;height:100%; width:auto;left:175px;top:10%;">
<svg name="Triangle" viewBox="0 0 371 378" fill="red" stroke="yellow" stroke-width="3" x="0" y="0" height="75%">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</div>
</body>
</html>

Like this?
<html>
<body>
<div class="container" style="width:100%; height:100%;">
<div class="container" style="width:100%; height:100%;">
<svg id="container" style="position:relative;border:dashed;width:100%;height:100%;" viewBox="0 0 1000 500">
<rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" />
<foreignObject x="275" y="50" width="371px" height="378px">
<div class="container" style="width:100%; height:100%;">
<svg id="shape" name="Triangle" x="0" y="0" fill="red" stroke="yellow" stroke-width="3" width="100%" height="100%">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</foreignObject>
</svg>
</div>
</div>
</body>
</html>
EDIT: Changed the snippet.
This version uses a <foreignObject> to wrap the inner svg with a div element. Outcome is as expected.
If you are trying to have something like this:
<div>
<div>
<svg> <!-- rect --> </svg>
</div>
<div>
<svg> <!-- triangle --> </svg>
</div>
</div>
Then you'll need to overlay the divs on top of one another and you can't manipulate the svg any further

make a title for <image> of SVG

I was trying to put a title for a img of SVG.
The title is at the bottom of the pic.
The code goes like:
<svg>
<image>
</svg>
How to realize this without using inner ?
And I also wanna make it based on D3.js , if possible.
Thanks.

In SVG elements, you don't use a title attribute. You have to use a <title> element, which you put inside the element to which it applies.
<svg>
<image xlink:href="http://lorempixel.com/300/150/" width="300" height="150">
<title>foobar</title>
</image>
</svg>

You could simply put a piece of text below the image. Put the text y position = image height + a little padding. Or you could put the y position a bit less than the image height and it would land on top of the image.
<?xml version="1.0" encoding="utf-8"?>
<!-- from this website http://tutorials.jenkov.com/svg/svg-and-css.html -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<image x="0" y="0" height="100" width="100" id="HVACEast" preserveAspectRatio="none" xlink:href="https://some.site.com/image.png" opacity="0.4" style="pointer-events: none"/>
<text stroke-width=".05" fill="#66CCB2" x="5" y="105" font-family="serif" font-size="5pt">IMAGE TITLE</text>
</svg>
Or use tspan for the text.
<text>
<tspan x="5" y="105" font-size="5pt" fill="yellow">Image</tspan>
<tspan x="5" y="108" font-size="5pt" stroke="blue">Title</tspan>
</text>

Embed inner HTML into SVG, and center align

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.

HTML <div> inside SVG shape

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.