There are similar questions like this, but none are identical.
The goal is to scale text as its enclosing rectangle or SVG element scales.
In the example below, the enclosing SVG element is 200x300.
The goal is for the whole element to preserve proportionality, including text.
If you scale by 0.5 to 100x150, the text should scale accordingly.
However, changing the size to 100x150 scales the SVG element correctly, but the text remains the same size and no longer retains the same proportions to the enclosing container.
Code pen: https://codepen.io/anon/pen/BvLZKv?page=1&
<svg width="200" height="300">
<g>
<rect x="0" y="0" width="100%" height="100%" fill="red"></rect>
<text x="50%" y="50%" font-family="Verdana" font-size="20" fill="blue" dominant-baseline="middle" text-anchor="middle">Hello</text>
</g>
</svg>
You can create the base svg and scale that entire svg with a scale value, then the text also will be scaled.
Here is a demo in which I scaled the svg to .5, the entire svg with the text is scaled to half.
svg {
transform: scale(.5);
transform-origin: 0% 0%;
}
<svg width="200" height="300">
<g>
<rect x="0" y="0" width="100%" height="100%" fill="red"></rect>
<text x="50%" y="50%" font-family="Verdana" font-size="82" fill="blue" dominant-baseline="middle" text-anchor="middle">Hello</text>
</g>
</svg>
Related
I have the following SVG code:
<svg width="100%" height="100px">
<text x="50%" y="60%" text-anchor="middle" style="">Name</text>
</svg>
This gives the following result. Too much extra space below the name. No matter what I try I cannot reduce it. Setting custom height cuts the name from the top.
If I change the height the Name gets cut from the top and margin is not working on text element.
<svg width="100%" height="40px">
<text x="50%" y="60%" text-anchor="middle" style="margin-top: 10px;">Name</text>
</svg>
What is the issue?
You may try the dy property of the text element.
<svg width="100%" height="100px" >
<text x="50%" y="60%" text-anchor="middle" dy="10px">Name</text>
</svg>
Is it possible to increase the width of a <rect> while keeping the height unchanged?
Use case:
There are different svg shapes that contain text like the one in the below example. Depending on the inputs this text may change. If the text is too long,
I want to increase the width to match the width of the text.
<svg viewBox="0 0 300 100" width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="red" stroke-width="3px" fill="white"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text>
</svg>
In the above example, the visible size of the <rect> is 300x100 pixels.
If I want to keep the visible height and increase the width,
I found that I can increase the width value of all svg->width, svg->viewBox->width and rect->width attributes.
<svg viewBox="0 0 400 100" width="400px" height="100px">
<rect x="0" y="0" width="400" height="100" stroke="red" stroke-width="3px" fill="white"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text>
</svg>
Could this go wrong? Is there a better way?
SVGs are amazing when it comes to filling the box that you give it. Simply create a div container with the required width and height styles and then put the svg inside of it set at 100% width and height. and do the same with each graphic element.
Keep in mind that using this method means you will more than likly need to adjust the padding of the div to place the svg where you need it.
<div style="width:600px; height:150px;">
<svg width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" stroke="red" stroke-width="3px" fill="white"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text>
</svg>
</div>
<br/>
<div style="width:100px; height:25px;">
<svg width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" stroke="red" stroke-width="3px" fill="white"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Hello World</text>
</svg>
</div>
I have a text that I want to adjust it to the size of svg container and position it in the middle (horizontally and vertically). I am looking for relative way, not absolute. So far I have tried putting the text inside svg and adjust it with viewBox attribute and also the transform: scale function.
Is there any standard way to do this?
UPDATE:
With the help of commentators I was able to put the text in the middle of the svg container. Thank you!
However, I am still unable to put multiline text in the middle. The second code snippet is the farthest I came to the solution.
Working code for one line text:
<svg width="890" height="500"overflow="hidden;">
<g>
<rect x="0" y="0" width="542" height="495" fill="#6fdd6f"></rect>
<svg x="0" y="0" width="542" height="495" viewBox="0 0 100 100">
<text alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" x="50%" y="50%">TXT</text>
</svg>
</g>
</svg>
Code with multiline that needs to be adjusted to center:
<svg width="890" height="500"overflow="hidden;">
<g>
<rect x="0" y="0" width="542" height="495" fill="#6fdd6f"></rect>
<svg x="0" y="0" width="542" height="495" viewBox="0 0 100 100">
<text alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" >
<tspan x="50%" y="50%">TXT</tspan>
<tspan dy="1em" x="50%" y="50%">more TXT</tspan>
<tspan dy="2em" x="50%" y="50%">end of TXT</tspan>
</text>
</svg>
</g>
</svg>
I tried to display a circle centered in a div.
This is my solution, but the circle appears cut.
What is the problem?
<svg>
<svg x="10%" y="20%">
<g transform="scale(1, 1)">
<circle r="100"/>
</g>
</svg>
</svg>
JSFiddle
By default inner <svg> elements clip their contents. You can set overflow="visible" if you don't want this to happen.
In addition the outer <svg> element has no width/height so it falls back to the defaults of 300 x 150.
If you fix it, it looks like this
html, body {
width: 100%;
height: 100%;
}
<svg width="100%" height="100%">
<svg x="50%" y="50%" overflow="visible">
<g transform="scale(1,1)">
<circle r="100"></circle>
</g>
</svg>
</svg>
This is the code i have so far but it's not good
<svg
width="200"
height="13">
<g
id="layer1">
<text
style="font-size:13px;font-family:Arial;"
x="0"
y="13"
id="">THIS IS A TEST</text>
</g>
</svg>
i am trying to get the text to fit perfectly in the box and etc. also need to add a background color to it.
This can serve:
<svg
baseProfile="full"
width="200"
height="13">
<g id="layer1">
<rect width="100%" height="100%" fill="red" />
<text
style="font-size:13px;font-family:Arial;"
x="0"
y="13"
id="">THIS IS A TEST</text>