I have a svg tag in my HTML. A series of texts have to be displayed on top of the image. The HTML is given below:
<svg version="1.1" id='couponSVG'
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 129.5 187.2" enable-background="new 0 0 129.5 187.2" xml:space="preserve">
<path fill="#3399ff" id='ticketPath'
d="16.6V4.3H5.2v12.3c..."/>
<text x="65" y="20">
<tspan font-style="normal" font-weight="normal" font-size="8px" text-anchor="middle">Next available ticket</tspan>
</text>
<text x="65" y="48">
<tspan font-style="normal" font-weight="normal" text-anchor="middle" id="queueNameSVG"></tspan>
</text>
<text x="64" y="58">
<tspan font-size="8px" font-style="normal" font-weight="normal" text-anchor="middle" id="ticketDateSVG"></tspan>
</text>
<text x="66" y="122">
<tspan font-size="64px" font-style="normal" font-weight="normal" text-anchor="middle" id="currentNumberSVG"></tspan>
</text>
<text x="66" y="155">
<tspan class='btn btn-link' font-size="10px" font-style="normal" font-weight="normal" text-anchor="middle" id="showQueueInfo">info / details</tspan>
</text>
</svg>
Everything inside the text tags should appear on top of the image. This is working correctly on Chrome, but not on Firefox. On Firefox, the entire text contents are going out of the image frame. Does anyone know why this could happen?
Remove the xml:space="preserve" in your <svg> tag.
Also, you don't need the x, y or enable-background attributes, but they are unrelated to your problem.
Related
I have something like this:
.speed-description {
font-size: calculate-rem(9px);
}
<svg #speedAnimation class="{{ speedAnimationClass }}" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<path class="loader" d="m 0 120 a 1 1 0 0 1 120 0" fill="none" stroke-linecap="round" stroke-width="11" />
<text text-anchor="middle" x="60" y="110" font-weight="900" ></text>
<text text-anchor="middle" x="60" y="120" font-weight="bold" class="speed-description">
{{ speedDescription }}
</text>
</svg>
Whatever I try I cannot make the 2 texts in bold.
What am I doing wrong?
Currently it's something like this
As I've commented: in SVG you can add a stroke to the text. This will make the text look like bold. You can use a stroke-width to set it as bold as you need.
text{stroke:black; stroke-width:.5}
<svg #speedAnimation class="speedAnimationClass" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<text text-anchor="middle" x="60" y="100" >some text</text>
<text text-anchor="middle" x="60" y="120" class="speed-description">speed Description</text>
</svg>
Alternatively you can use <feMorphology> for this. In this case you will need to play with the value of the radius attribute of the <feMorphology>
<svg #speedAnimation class="speedAnimationClass" viewBox="-10 50 140 80" preserveAspectRatio="xMinYMax meet">
<filter id="dilate">
<feMorphology operator="dilate" radius=".5"/>
</filter>
<text text-anchor="middle" x="60" y="100" filter="url(#dilate)" >some text</text>
<text text-anchor="middle" x="60" y="120" class="speed-description" filter="url(#dilate)">speed Description</text>
</svg>
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 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>
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>