I would like to write multiple lines in this circles without css, but only if it's needed style tag.
Here's the code:
<svg height="300" width="300">
<circle cx="150" cy="150" r="120" stroke="red" stroke-width=4 fill="#ffffff" />
<text x="50%" y="50%" text-anchor="middle" stroke="#000000" stroke-width="1px" dy=".3em">My code<br/>isn't good</text>
</svg>
Thank you!
this is the best i was able to do. It works but its hardcoded which obviously is not ideal. I looked at this other post btw, might be of some help: How to linebreak an svg text within javascript?
<svg height="300" width="300">
<circle cx="150" cy="150" r="120" stroke="red" stroke-width=4 fill="#ffffff" />
<text text-anchor="middle" stroke="#000000" stroke-width="1px" dy=".3em">
<tspan x="50%" y="40%" dy="1.2em">very long text</tspan>
<tspan x="50%" y="50%" dy="1.2em">I would like to linebreak</tspan>
</text>
</svg>
Related
I generated a SVG using Adobe XD. They use transform for positioning things but the text in my mini computer screen is not always the same width (it is dynamically generated). I have tried anchored, anything I could find but it still didn't work. This is how it looks with the current code:
Here is the code:
<svg xmlns="http://www.w3.org/2000/svg" width="903.5" height="860.5" viewBox="0 0 1200 1041">
<g transform="translate(-397)">
<g
transform="translate(507 975)"
fill="#fff"
stroke="#707070"
strokeWidth="1"
>
<rect width="907" height="66" rx="33" stroke="none" />
<rect x="0.5" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(901 613)" fill="#fff" />
<g
transform="translate(397)"
fill="#232323"
stroke="#fff"
stroke-width="30"
>
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="white"
fontSize="96"
fontFamily="Fredoka"
>
{screenText}
</text>
</g>
</svg>
You can use transform/translate, text-anchor and dominant-baseline to place a text in the middle of something.
body {
background: gray;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1041">
<g
transform="translate(600 975)"
fill="#fff"
stroke="#707070"
stroke-width="1">
<rect x="-453.5" width="907" height="66" rx="33" stroke="none" />
<rect x="-454" y="0.5" width="906" height="65" rx="32.5" fill="none" />
</g>
<rect width="119" height="395" transform="translate(545.5 613)" fill="#fff" />
<g transform="translate(50)"
fill="#232323"
stroke="#fff"
stroke-width="30">
<rect width="1127" height="627" rx="103" stroke="none" />
<rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
</g>
<text
fill="#fff"
font-size="96"
font-family="Fredoka"
transform="translate(600 300)"
text-anchor="middle"
dominant-baseline="middle">
{screenText}
</text>
</svg>
Thanks to Buhan Yu's comment I learned that you need to specify x and y to center align it. I set x="50%" and it worked!
I am using svg to display text at specific position, But the text at end of the svg container is cropped.
How to display that text.
I am using the following code
<svg width="100" style="background:yellow">
<text x="0" y="100" stroke="red" text-anchor="middle">0</text>
<text x="20" y="100" stroke="red" text-anchor="middle">20</text>
<text x="40" y="100" stroke="red" text-anchor="middle">40</text>
<text x="60" y="100" stroke="red" text-anchor="middle">60</text>
<text x="80" y="100" stroke="red" text-anchor="middle">80</text>
<text x="100" y="100" stroke="red" text-anchor="middle">100</text>
</svg>
I want to display 0 and 100 completely and don't want to change the svg container width
In order not to change the size of the numbers and see all of them, you need to add a viewBox and increase the width
<svg width="130" viewBox="-10 0 130 130" style="background:yellow">
<text x="0" y="100" stroke="red" text-anchor="middle">0</text>
<text x="20" y="100" stroke="red" text-anchor="middle">20</text>
<text x="40" y="100" stroke="red" text-anchor="middle">40</text>
<text x="60" y="100" stroke="red" text-anchor="middle">60</text>
<text x="80" y="100" stroke="red" text-anchor="middle">80</text>
<text x="100" y="100" stroke="red" text-anchor="middle">100</text>
</svg>
I'm trying to use an svg def tag to show some dimensions in a creative manner.
For an example, I have below example svg def.
<svg>
<defs>
<g id="aaa" stroke-opacity="null" stroke-width="0" stroke-linecap="null" stroke-linejoin="null" fill="#6bfc46" >
<circle cx="300" cy="400" r="30" />
<rect x="300" y="400" width="30" height="30" />
<circle cx="300" cy="400" r="25" fill="#ffffff" />
<text x="300" y="400" text-anchor="middle" stroke="#6bfc46" stroke-width="2px" dy=".3em">5</text>
</g>
</defs>
<svg/>
What I need to achieve is I should be able to use this defined text in different locations as below.
<use xlink:href="#aaa" x="480" y="550" changing_text="3">
<use xlink:href="#aaa" x="580" y="650" changing_text="9">
My Question is
1) Is this possible with SVG ?
2) How can we achieve this ?
I have the following really simple SVG code
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
<g stroke="#ccc">
<line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line>
</g>
<g stroke="#ccc">
<line x1="140" y1="40" x2="200" y2="40" stroke-width="2"></line>
</g>
<circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
<circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle>
<text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"></text>
<text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text>
</svg>
</div>
FIDDLE HERE, My difficulty is regarding the following svg element and how the text-anchor attribute works with it:
<text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text>
Now if i change text-anchor="start" , the text element does't really move to the start of the svg element, it rather moves to the start of the line below it , why ? can anybody explain why text-anchor="start" , is not working as expected ?
text-anchor is used to decide whether the X position of the text should be at the start, the end or in the middle of the text. To move the text position change it's X and Y coordinates.
To put the text at the start of the svg:
x="0"
text-anchor="start"
To put the text at the end of the svg:
x="194" //Width of the svg
text-anchor="end"
To put the text in the middle of the svg:
x="97" //Half of the width of the svg
text-anchor="middle"
I'd like to right-lign text at the end of a textPath:
<svg height="300" width="400">
<defs>
<path id="myTextPath" d="M30,160 A175,175 0 0,1 370,160" />
</defs>
<path d="M30,160 A175,175 0 0,1 370,160" style="stroke: black; stroke-width:1; fill:none;" />
<g fill="black" stroke="none">
<text x="0%" y="0" text-anchor="start">
<textPath xlink:href="#myTextPath">Start</textPath>
</text>
<text x="50%" y="0" text-anchor="middle">
<textPath xlink:href="#myTextPath">Middle</textPath>
</text>
<text x="100%" y="0" text-anchor="end">
<textPath xlink:href="#myTextPath">End</textPath>
</text>
</g>
</svg>
You can see this working here: http://jsfiddle.net/7sqdxw11/
The Start text begins right where I'd expect - at the beginning of the textPath.
However, the end text ends well short of the end of the textPath.
(The Middle is also well shy of the middle of the textPath).
Here's a screenshot:
What am I doing wrong? How to I get the End to end at the right end of the textPath arc?
In SVG percentage coordinates generally refer to the either the width of the SVG, or in some cases the width of the parent object.
So in your example the "100%" will result in a value of 400px - the width of your SVG. However your path actually has a length of 466. You can get the length by experimentation, or by using some Javascript:
var len = document.getElementById("myTextPath").getTotalLength();
So if you change the "100%" to "466" you get the effect you wanted.
<svg height="300" width="400">
<defs>
<path id="myTextPath" d="M30,160 A175,175 0 0,1 370,160" />
</defs>
<path d="M30,160 A175,175 0 0,1 370,160" style="stroke: black; stroke-width:1; fill:none;" />
<g fill="black" stroke="none">
<text x="0" y="0" text-anchor="start">
<textPath xlink:href="#myTextPath">Start</textPath>
</text>
<text x="233" y="0" text-anchor="middle">
<textPath xlink:href="#myTextPath">Middle</textPath>
</text>
<text x="466" y="0" text-anchor="end">
<textPath xlink:href="#myTextPath">End</textPath>
</text>
</g>
</svg>