I'm trying to code an SVG, but the placement looks right in Chrome, while the same code looks off in Firefox. Is there any compatibility tag to use to make it look the same?
It looks like the values are interpreted differently in Firefox.
Code
body {
font-family: "Roboto", sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333;
background-color: #fff;
}
<svg
viewbox="0 0 200 200"
style="display: block; width: 100%; position: relative"
>
<circle cx="100" cy="100" r="100" fill="orange" />
<g
fill="white"
font-style="italic"
transform="translate(25, 90)"
>
<text
letter-spacing="-10"
dx='5'
dy='0'
>
<tspan alignment-baseline="middle" dominant-baseline="middle" font-size="50" font-weight="700">
+
</tspan>
<tspan
dominant-baseline="middle"
alignment-baseline="middle"
font-size="105"
font-weight="700"
>
5
</tspan>
<tspan
dominant-baseline="middle"
alignment-baseline="middle"
font-size='45'
font-weight="700"
dy="-17"
dx="20"
>
$
</tspan>
</text>
<text dy="60" dx="6" font-size="30" font-weight="700" letter-spacing="1.5">
DOLLAR
</text>
</g>
</svg>
Output in Chrome
Output in Firefox
Related
So i have this SVG image on my site. Which works perfectly on desktop. But on smartphones it is an entirely different story
As you can see it breaks up the image. But it only does that on smartphones.
Any idea why?
Its just a normal img tag:
<img src="brand.svg">
EDIT!!
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320.65 66.28">
<defs>
<style>
.cls-1{
font-size:50px;
}
.cls-1,.cls-4{
font-family:Montserrat-SemiBold, Montserrat;font-weight:700;
}
.cls-2{
letter-spacing:0em;
}
.cls-3{
letter-spacing:-0.01em;
}
.cls-4{
font-size:16px;
}
.cls-5{
letter-spacing:-0.02em;
}
.cls-6{
letter-spacing:0em;
}
.cls-7{
letter-spacing:0em;
}
.cls-8{
letter-spacing:0.01em;
}
</style>
</defs>
<title>Aktiv 3</title>
<g id="Lag_2" data-name="Lag 2">
<g id="Lag_1-2" data-name="Lag 1">
<text class="cls-1" transform="translate(0 42.5)">Designpl<tspan class="cls-2" x="230.3" y="0">a</tspan>
<tspan class="cls-3" x="260.9" y="0">c</tspan>
<tspan x="289.55" y="0">e</tspan></text>
<text class="cls-4" transform="translate(0.35 62.04)">A <tspan class="cls-5" x="16.4" y="0">w</tspan>
<tspan class="cls-6" x="30.86" y="0">o</tspan>
<tspan class="cls-7" x="41.18" y="0">r</tspan>
<tspan x="47.82" y="0">k of A</tspan>
<tspan class="cls-8" x="95.04" y="0">r</tspan>
<tspan class="cls-6" x="102" y="0">t</tspan>
</text>
</g>
</g>
</svg>
I can see in the code that there are sometimes some spans, with only 1 letter. Can that be it? The weird thing is that it works on desktops and laptops perfectly.
EDIT!!
WORKING!
I got it to work. i cleaned up the code by writing how it really should look (deleted spaces, deleted the tspans, and deleted the x and y cordinates) then i imported using another name. Because the smartphones that i was testing it on didn't want to reload using: Javascript:location.reload(true).
Remove the x and y attributes from the <tspan>s and the spaces between the <tspan>s
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320.65 66.28">
<defs>
<style>
.cls-1{
font-size:50px;
}
.cls-1,.cls-4{
font-family:Montserrat-SemiBold, Montserrat;font-weight:700;
}
.cls-2{
letter-spacing:0em;
}
.cls-3{
letter-spacing:-0.01em;
}
.cls-4{
font-size:16px;
}
.cls-5{
letter-spacing:-0.02em;
}
.cls-6{
letter-spacing:0em;
}
.cls-7{
letter-spacing:0em;
}
.cls-8{
letter-spacing:0.01em;
}
</style>
</defs>
<title>Aktiv 3</title>
<g id="Lag_2" data-name="Lag 2">
<g id="Lag_1-2" data-name="Lag 1">
<text class="cls-1" transform="translate(0 42.5)">Designpl<tspan class="cls-2" >a</tspan><!--
--><tspan class="cls-3" >c</tspan><!--
--><tspan>e</tspan></text>
<text class="cls-4" transform="translate(0.35 62.04)">A <tspan class="cls-5" x="16.4" y="0">w</tspan><!--
--><tspan class="cls-6">o</tspan><!--
--><tspan class="cls-7">r</tspan><!--
--><tspan>k of A</tspan><!--
--><tspan class="cls-8" >r</tspan><!--
--><tspan class="cls-6" >t</tspan>
</text>
</g>
</g>
</svg>
I wanted to position text in the bottom left of an SVG element, and managed to achieve that using groups and transforms, but noticed that it won't update if i resize my window vertically, and also it won't apply on page load, but if i add the transform properties through developer console. they work perfectly, until i resize the window.
Is it some kind of a bug or i am doing something wrong? Is there another way to position text inside SVG element relative to bottom left and keep it responsive to window resize? I am using chrome 61 by the way.
here's a link to jsfiddle too:
https://jsfiddle.net/eow1c4o4/
*,*:before,*:after {
box-sizing: border-box;
}
body, html {
padding: 0;
margin: 0;
height: 300vh
}
tspan {
font-weight: 900;
font-size: 50px;
dominant-baseline: hanging;
}
<svg width="100%" height="100vh">
<defs>
<mask id="mask" maskUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="white"/>
<g style="transform: translate(0, 100%);">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<g style="transform: translate(50px, -100%);">
<text x="0" y="0" text-anchor="start" font-family="Roboto">
<tspan x="0" dy="0">SOME</tspan>
<tspan x="0" dy="0.81em">ABSOLUTELY</tspan>
<tspan x="0" dy="0.81em">RANDOM TEXT</tspan>
</text>
</g>
</g>
</mask>
</defs>
<rect width="100%" height="100%" fill="#dedede" fill-rule="evenodd" mask="url(#mask)"></rect>
</svg>
Transforms in SVGs don't allow percentages. But geometric attributes do allow them. So the simplest way to do this is with a <use> element.
*,*:before,*:after {
box-sizing: border-box;
}
body, html {
padding: 0;
margin: 0;
height: 300vh
}
tspan {
font-weight: 900;
font-size: 50px;
}
<svg width="100%" height="100vh">
<defs>
<text id="mytext" x="0" y="-80" text-anchor="start" font-family="Roboto">
<tspan x="0" dy="0">SOME</tspan>
<tspan x="0" dy="0.81em">ABSOLUTELY</tspan>
<tspan x="0" dy="0.81em">RANDOM TEXT</tspan>
</text>
<mask id="mask" maskUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="white"/>
<use xlink:href="#mytext" x="5%" y="95%" fill="black"/>
</mask>
</defs>
<rect width="100%" height="100%" fill="#dedede" fill-rule="evenodd" mask="url(#mask)"></rect>
</svg>
The way we get the text to sit at the bottom, is to initially position it just off the top of the screen. Then we use a <use> element to reposition it at y="95%". That's just a little less than 100% so it ends up just above the bottom.
https://jsfiddle.net/eow1c4o4/1/
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 have a bar chart I've created using D3. I've left out the JS code because the issue has to do with html and css not D3.
Run the snippet below. There are 3 sections (g elements) each with a label and 3 bars (with some text inside). The first g element seems to be rendering outside the svg, cutting off the label text, and I cannot figure out why.
Things I've already tried (that don't work):
Position relative on the svg and g elements.
overflow: visible (would be more of a hack than a solution)
wrapping the svg in a clearfix div
I would prefer a solution, opposed to a hack like translate the g elements down by 20 each...
#chart{ width:100%;}
#chart rect {
fill: steelblue;
}
#chart text.value {
fill: white;
font-size: 10px;
text-anchor: end;
}
#chart text.value2 {
fill: white;
font-size: 12px;
}
#chart text.label {
fill: black;
font-size: 20px;
}
<svg id="chart" width="908" height="375">
<g transform="translate(0,0)">
<text class="label" x="0" y="0">test 1</text>
<rect x="0" y="10" width="314.3076923076923" height="25"></rect>
<text class="value" x="309.3076923076923" y="22.5" dy=".35em">25</text>
<text class="value2" x="10" y="22.5" dy=".35em">a</text>
<rect x="0" y="38" width="440.03076923076924" height="25"></rect>
<text class="value" x="435.03076923076924" y="50.5" dy=".35em">35</text>
<text class="value2" x="10" y="50.5" dy=".35em">b</text>
<rect x="0" y="66" width="326.88000000000005" height="25"></rect>
<text class="value" x="321.88000000000005" y="78.5" dy=".35em">26</text>
<text class="value2" x="10" y="78.5" dy=".35em">c</text>
</g>
<g transform="translate(0,119)">
<text class="label" x="0" y="0">test 2</text>
<rect x="0" y="10" width="377.1692307692308" height="25"></rect>
<text class="value" x="372.1692307692308" y="22.5" dy=".35em">30</text>
<text class="value2" x="10" y="22.5" dy=".35em">a</text>
<rect x="0" y="38" width="502.8923076923077" height="25"></rect>
<text class="value" x="497.8923076923077" y="50.5" dy=".35em">40</text>
<text class="value2" x="10" y="50.5" dy=".35em">b</text>
<rect x="0" y="66" width="628.6153846153846" height="25"></rect>
<text class="value" x="623.6153846153846" y="78.5" dy=".35em">50</text>
<text class="value2" x="10" y="78.5" dy=".35em">c</text>
</g>
<g transform="translate(0,238)">
<text class="label" x="0" y="0">test 3</text>
<rect x="0" y="10" width="565.7538461538462" height="25"></rect>
<text class="value" x="560.7538461538462" y="22.5" dy=".35em">45</text>
<text class="value2" x="10" y="22.5" dy=".35em">a</text>
<rect x="0" y="38" width="817.2" height="25"></rect>
<text class="value" x="812.2" y="50.5" dy=".35em">65</text>
<text class="value2" x="10" y="50.5" dy=".35em">b</text>
<rect x="0" y="66" width="477.7476923076924" height="25"></rect>
<text class="value" x="472.7476923076924" y="78.5" dy=".35em">38</text>
<text class="value2" x="10" y="78.5" dy=".35em">c</text>
</g>
</svg>
The text.label elements "baseline" is, by default, at the bottom edge of the text. Meaning, when you render text at (0,0), the text is rendered from the bottom left corner.
To fix your issue, you can add dominant-baseline: hanging; to the text.label rule in your CSS, and adjust the bars down by the height of the text.
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.