I have a SVG logo with text, text is centered.
And this works fine in chrome and IE but not firefox, the text is slightly moved to the left.
<text transform="matrix(0.9287 0 0 1 60.9023 137.7646)">
<tspan x="0" y="0" fill="#FFFFFF" stroke="#FAFAF8" stroke-miterlimit="10" font-family="'Consolas'" font-size="71.5163" letter-spacing="9.691">SOC</tspan>
<tspan x="-24.809" y="85.819" fill="#FFFFFF" stroke="#FAFAF8" stroke-miterlimit="10" font-family="'Consolas'" font-size="71.5163" letter-spacing="9.691">KING</tspan>
</text>
Please help.
use text-anchor="middle" to center the text (then its x coordinate points to the center)
OK so I came up with a work around to get letter spacing the same in both chrome and firefox. What I did was add both to text-transform: letter-spacing="9.691" textLength="780px" and adjusted the x until both browsers displayed the text in the center of the image. Its not pretty but it works.
<text transform="matrix(0.9287 0 0 1 60.9023 137.7646)" letter-spacing="9.691" textLength="780px" font-weight="bold">
<tspan x="1" y="0" fill="#FFFFFF" font-family="'Consolas'" font-size="71.5163">SOC</tspan>
<tspan x="-21.8" y="85.819" fill="#FFFFFF" font-family="'Consolas'" font-size="71.5163">KING</tspan>
</text>
Related
I have some and SVG component that has text in the center - this text renders perfectly fine on Chrome, but just doesn't appear on Safari.
Here are the differences between the 2 browsers:
I'm not sure what the issue is. How can I resolve this?
Here's a link to the code:
https://codepen.io/iamegamind/pen/bGwmpVg?editors=1100
I've done this using the following code:
<svg style="width: 250px; height: 250px"
viewBox="0 0 150 120"
class="progress-card"
xmlns="http://www.w3.org/2000/svg">
<circle style=" stroke-dasharray: 339.29; stroke-dashoffset: 439.29; stroke-width: 8"
r="40"
cx="50%"
cy="50%"/>
<text class="title" x="63" y="50">
<tspan text-anchor="middle" alignment-baseline="central">
Your credit score
</tspan>
</text>
<text class="score" x="63" y="65" text-anchor="middle" alignment-baseline="central">
510
</text>
<text class="status" style="fill: rgb(2, 171, 118)" x="63" y="85" text-anchor="middle" alignment-baseline="central">
Excellent!
</text>
<text class="min" x="30" y="105" text-anchor="middle" alignment-baseline="central">
0
</text>
<text class="max" x="95" y="105" text-anchor="middle" alignment-baseline="central">
710
</text>
</svg>
Safari is hit or miss on supporting certain CSS properties on certain SVG sub-elements. In this case, it's the transform on the SVG text element that it's freaking out about. If you remove it, it will render just fine.
While you could add SVG transforms on the text element, my recommendation might be to not to put a rotate transform on the SVG element class, but instead put the rotate transform on a g element wrapping the circles within the SVG (why do you need two SVG elements btw?). Then position the text using x,y without the need to reverse the transform on the SVG element itself.
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>
This answer and this answer explain how to show multiple lines of text and how to center one line of text with SVG, but how do you center multiple lines of text?
As you can see from this Code Pen, the text block is not centered because of the dy attribute, which is needed to display multiply lines.
The goal is to allow dynamic insertion/deletion of lines while preserving the centered nature of the text block. So the user might add a fourth line or delete two lines. In both cases, the text block should remain centered.
One approach is to modify the dy values each time a line is removed/inserted as some suggested, but is there a non-JS approach to vertically centering a block of text?
<svg style="border:1px solid black" width="200" height="300">
<text x="50%" y="50%" font-size="15">
<tspan x="0" dy="1.2em" dominant-baseline="central">tspan line 1</tspan>
<tspan x="0" dy="1.2em" dominant-baseline="central">tspan line 2</tspan>
<tspan x="0" dy="1.2em" dominant-baseline="central">tspan line 3</tspan>
</text>
</svg>
This is how I would do it:I'm centring everything around the center of the SVG canvas and I'm offsetting the first and the last line with dy
text{text-anchor:middle;dominant-baseline:central;}
<svg style="border:1px solid black" width="200" height="300">
<text x="50%" y="50%" font-size="15">
<tspan x="100" y="150" dy="-1.2em" >tspan line 1</tspan>
<tspan x="100" y="150" >tspan line 2</tspan>
<tspan x="100" y="150" dy="1.2em" >tspan line 3</tspan>
</text>
</svg>
update
The OP commented that they: updated the question to reflect the need for dynamic insert/deletion of lines.
In this case I would put the whole text inside a group and I would use the bounding box of the group to center the text:
The red circle I've added is just in order to see the center of the SVG canvas.
let bb = txt.getBBox(); console.log()
let X = 100;
let Y = 150 - bb.y - (bb.height)/2;
txt.setAttributeNS(null,"transform",`translate(${X},${Y})`)
text{text-anchor:middle;dominant-baseline:central;font-size:15;}
<svg style="border:1px solid black" width="200" height="300">
<text id="txt"><!--
--><tspan x="0" y="0">tspan line 1</tspan><!--
--><tspan x="0" y="1.2em">tspan line 2</tspan><!--
--><tspan x="0" y="2.4em" >tspan line 3</tspan><!--
--><tspan x="0" y="3.6em" >tspan line 4</tspan>
</text>
<circle cx="100" cy="150" r="3" fill="red"/>
</svg>
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.
I have the following SVG file I am working on.
http://jsfiddle.net/slayerofgiants/9y3qc/8/
If you notice from the fiddle file, the horizontal scrollbar extends to about twice the width of the SVG drawing. There is nothing but white space beyond the edge of the SVG. If I remove the <g> and <text> elements, then horizontal scrollbar goes away and is the size of the width of the screen.
You can see this on this 2nd jsfiddle
http://jsfiddle.net/slayerofgiants/m5zPv/
The code below is the SVG with no g elements containing the paired text elements.
<svg version="1.1" width="90%" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
xml:space="preserve" preserveAspectRatio="xMinYMid meet">
<font horiz-adv-x="1000">
<g id="fullTAB" transform="scale(1.1,1)" >
<g id="tablines" display="block">
<line fill="none" id="lowE" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="45" x2="262" y2="45"/>
<line fill="none" id="Astring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="38.5" x2="262" y2="38.5"/>
<line fill="none" id="Dstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="32" x2="262" y2="32"/>
<line fill="none" id="Gstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="25.5" x2="262" y2="25.5"/>
<line fill="none" id="Bstring" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="19" x2="262" y2="19"/>
<line fill="none" id="highE" stroke="#000000" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" x1="6" y1="12.5" x2="262" y2="12.5"/>
</g>
<rect x="258" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="260" y="12" display="inline" width="2.618" height="32.73"/>
<rect x="78" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="6" y="12" display="inline" width="1" height="32.73"/>
<rect x="204" y="12" display="inline" width="0.829" height="32.73"/>
<rect x="142" y="12" display="inline" width="0.829" height="32.73"/>
<text x="13" y="21" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">T</text>
<text x="13" y="31" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">A</text>
<text x="13" y="41" style="text-anchor: middle" display="inline" font-family="'MyriadPro-Bold'" font-size="8.3685">B</text>
<g id="fretinformation">
</g><!--Fret Information -->
</g><!--Full Tab -->
</svg>
The code below is the g element with the paired text elements I am using which when inserted into the document causes the scrollbar to extend to about twice the width of the drawing size. I have a number of these with different x values. They are in the #fretinformation g element which is empty in the code above.
<g display="inline">
<text x="248" y="35" style="text-anchor: middle" fill="#324DCE" font-family="'MyriadPro-Bold'" font-size="8.3685">2</text>
<text x="248" y="41.5" style="text-anchor: middle" fill="#324DCE" font-family="'MyriadPro-Bold'" font-size="8.3685">3</text>
</g>
I had thought the g element had no width value and the text element width would collapse to only the width of the text it contained. What are the default widths/margin/padding of the g and text elements? And how can I change this behavior so there is no horizontal scrollbar?
Thanks--Christopher
EDIT
What appears to be happening is the text element is getting a width of 90% of the window size and as the text element is transformed along the x axis, it increases the overall width of the SVG file to be almost twice what it should be. As I remove text elements from right to left, the amount of whitespace to the right of the SVG file decreases.
SVG does not use a box layout model like HTML/CSS.
Putting display="inline" on an SVG element is basically meaningless. SVG elements are placed and drawn where you explicitly tell them.
The thing that determines the width and height of an SVG document is the width and height attributes (and sometimes the viewBox) of the root <svg> element.
However there are some differences (ie. bugs) in the way browsers lay out SVG elements. The fact that you are getting a scrollbar is an IE bug. You can use GCyrillus' overflow hidden trick to fix that.
It is render as an inline-boxe without any extra padding or margins.
I noticed a bug in chrome and another in IE11. wich one bothers you ?
It is somehow a bug that you can fix with : height:1%;(chrome) and overflow:hidden(IE) in your case : DEMO
svg {
display:block;
border:solid;
width:90%;
height:1%; /* fix webkit */
overflow:hidden;/* fix IE */
}
jsfiddle re-edited from IE11 : http://jsfiddle.net/9y3qc/13/ to check once again your comment