I try to write a text element in an SVG from x="50%" y="0".
My text is not appears and I don't know why.
Here is my SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="900px" height="706" viewBox="0 0 900 706" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<text x="50%" y="0" text-anchor="middle" fill="#f00" text-anchor="middle" style="font-family: DINPro; font-size: 28px;">xxxx</text>
</svg>
I am not know the font-size it will be dynamically. If I am give y="20" then my text appears. But why is it?
As I read here, the 0 0 it the left top corner of the SVG.
Why is it? As you see, the the with and the height and the viewBox is the same.
Do I miss something?
Add an dominant-baseline attribute to your text element and set to hanging.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="900px" height="706" viewBox="0 0 900 706" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<text x="50%" y="0" fill="#f00" text-anchor="middle" style="font-family: DINPro; font-size: 28px;" dominant-baseline="hanging">xxxx</text>
</svg>
You have three options to change this:
dominant-baseline – used to determine or re-determine a scaled-baseline-table
alignment-baseline – specifies which baseline is to be aligned with the
corresponding baseline of the parent
baseline-shift – allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent
See this post for more information about this: http://vanseodesign.com/web-design/svg-text-baseline-alignment/
Per the SVG specification
The Y coordinate of the bottom of a roman capital letter is usually zero. And the descenders on lowercase roman letters have negative coordinate values.
On a text element, y is the element bottom position.
In your case, the text printed outside of the viewbox.
Try to set your y to 20.
Related
I'm drawing a graphic in CorelDRAW (2021) and then exporting it to SVG.
In CorelDRAW, one of the artistic text objects contains text in different font weights. For example:
Garfield sat on the mat
Problem: Some browsers, such as Chrome and Edge, display that text in the SVG as:
Garfieldsat on the mat
That is, with the bold "Garfield" abutting the normal "sat", with no space.
In other browsers, such as Firefox, the same SVG displays as expected, with a space.
Example SVG (exported from CorelDRAW: not a truly minimal example, but I've stripped some of the excess markup):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2021.5 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.44562in" height="0.247335in" version="1.1" viewBox="0 0 18928.2 1358.7">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#373435}
.fnt1 {font-weight:normal;font-size:1831.1px;font-family:'Arial'}
.fnt0 {font-weight:bold;font-size:1831.1px;font-family:'Arial'}
]]>
</style>
</defs>
<text x="-87.9" y="1334.9" class="fil0 fnt0">Garfield</text>
<text x="6831.7" y="1334.9" class="fil0 fnt1"> sat on the mat</text>
</svg>
Chrome and Edge, and possibly other browsers, ignore leading spaces inside the SVG <text> element.
Here's a snippet of the SVG:
<text ... class="fil4 fnt0">Garfield</text>
<text ... class="fil4 fnt1"> sat on the mat</text>
(where "..." indicates elided attributes)
Note:
CorelDRAW has split the original single text object into two SVG <text> elements. Understandable, because of the different font weights (.fnt0 is bold, .fnt1 is normal).
The content of the second <text> element begins with a space.
Workaround: In CorelDRAW, don't mix font weights in a single text object.
More generally, whatever application you use to create SVG: if you notice a missing space when the SVG is rendered (say, in a browser), check whether the content of the corresponding SVG <text> element begins with a leading space. If so, rework your artwork in the original application to avoid that SVG output.
Usually for html2pdf, in common with many apps, heavy weight texts tend to "stretch" into a following void, or in this case the leading space is not defined. One way to enforce whitespace is try in standard html see the enforced spacing in https://stackoverflow.com/a/74297349/10802527
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2021.5 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="3.44562in" height="0.247335in" version="1.1" viewBox="0 0 18928.2 1358.7">
<defs>
<style type="text/css">
<![CDATA[
.fil0 {fill:#373435}
.fnt1 {font-weight:normal;font-size:1831.1px;font-family:'Arial'}
.fnt0 {font-weight:bold;font-size:1831.1px;font-family:'Arial'}
]]>
</style>
</defs>
<text x="-87.9" y="1334.9" class="fil0 fnt0">Garfield</text>
<text x="6831.7" y="1334.9" class="fil0 fnt1"> sat on the mat</text>
</svg>
I'm trying to create my own SVG font but it's not rendering. Using code from Mozilla's example here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/glyph I wrote this:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="640" height="346" viewBox="0 0 640 346">
<defs>
<font id="arial-hollow" horiz-adv-x="640">
<font-face font-family="Arial-Hollow" font-weight="bold" font-style="normal" units-per-em="500" cap-height="300" x-height="200" ascent="350" descent="150" alphabetic="0" mathematical="175" ideographic="200" hanging="250">
<font-face-src>
<font-face-name name="Arial-Hollow"/>
</font-face-src>
</font-face>
<glyph unicode="y" d="m 290.15467,345.00314 c -0.99838,-0.61637 -1.69965,-2.23572 -1.69965,-3.92482 0,-2.50765 0.35204,-2.8755 2.75182,-2.8755 1.5135,0 3.00684,-0.25593 3.31854,-0.56873 0.31171,-0.3128 -1.14514,-4.69641 -3.23743,-9.74136 -2.09229,-5.04495 -3.80416,-9.63645 -3.80416,-10.20334 0,-0.62947 1.9525,-0.91602 5.01577,-0.7361 4.94555,0.29048 5.03101,0.34919 6.1032,4.19319 1.15832,4.15281 1.83946,3.86929 2.92681,-1.21831 0.6524,-3.05249 0.85066,-3.1676 5.45598,-3.1676 2.62843,0 4.77897,0.41075 4.77897,0.9128 0,1.98567 -8.87091,24.97605 -10.12123,26.23077 -1.72468,1.73076 -9.29262,2.4547 -11.48862,1.099 z m 8.59567,-2.67299 c 1.58402,-1.06141 2.89916,-3.88879 6.66531,-14.32958 3.3272,-9.22389 3.35387,-9.41498 1.27187,-9.11243 -1.65647,0.24074 -2.46706,1.49296 -3.66669,5.66456 -2.14643,7.46397 -4.05584,7.47746 -6.29846,0.0446 -1.50399,-4.98488 -2.11995,-5.88738 -4.01815,-5.88738 l -2.24187,0 3.36686,8.01125 c 4.23089,10.06712 4.30363,12.27085 0.45319,13.72934 -1.60253,0.60702 -2.91369,1.44611 -2.91369,1.86464 0,0.96151 5.95103,0.97365 7.38163,0.015 z">
</glyph>
</font>
</defs>
<text x="100" y="100" font-family="Arial-Hollow">
y u no render??
</text>
</svg>
https://codepen.io/anon/pen/YvdBzp
The Mozilla developer page you linked states right at the top that <glyph> is deprecated. In fact, the whole concept of a SVG font is no longer working in current browsers, with the exception of Safari.
I'm trying to create my first animating SVG graphic! I have a star that I want to first get animated in any way I can before I try to get the desired animation. So I've been examining tutorials, and I thought I had my code set up properly, but when I open it in a browser, it doesn't animate. Something isn't right, and it's probably the code that Illustrator generated that's causing the issue. I tried to clean it up already though. I'm sure it's something easy to get working.
In the following code, I'm trying to animate the star from the right of screen to the left (1000 to 0). If you could help me figure that out I'd surely appreciate it!
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
height="193" width="182.67" viewBox="0 0 193 182.67" enable-background="new 0 0 193 182.67" xml:space="preserve">
<path x="0" y="100" stroke="goldenrod" stroke-width="3" fill="gold" fill-rule="evenodd" clip-rule="evenodd" d="M155.97,182.35c-6.51-1.77-11.74-5.54-17.37-8.4
c-13.17-6.7-26.14-13.79-39.17-20.76c-1.61-0.86-3.28-1.05-4.77-0.19c-13.24,7.61-27.21,13.84-40.54,21.28
c-3.56,1.98-7.05,4.1-10.71,5.88c-4.06,1.98-6.25,0.61-4.9-3.53c1.98-6.1,1.49-12.46,3.14-18.59c1.21-4.5,1.7-9.31,2.47-13.99
c1.1-6.69,2.03-13.39,3.66-19.99c1.1-4.45,0.71-8.19-3.33-11.91C31.24,99.98,18.18,87.63,5.51,74.88
c-1.61-1.62-2.88-3.51-4.62-5.04C1.82,68.4,3.35,69.08,4.5,69c9.23-0.58,18.21-2.84,27.34-3.84c6.58-0.72,12.96-2.74,19.68-2.61
c4.47,0.09,8.68-2.01,13.27-2.03c2.68-0.01,3.74-2.98,4.68-5.18c2.5-5.84,5.53-11.38,8.64-16.91c5.32-9.44,8.74-19.82,14.13-29.24
C93.78,6.5,95.26,3.78,97,0.64c3.18,4.47,4.81,9.38,7.11,13.89c6.86,13.42,13.52,26.93,20.16,40.46c1.92,3.91,4.54,5.53,9.13,6.08
c6.34,0.76,12.73,1.67,19.05,2.99c5.63,1.17,11.45,1.86,17.21,2.49c6.85,0.75,13.54,2.74,20.54,2.46c2.28-0.09,2.7,1.23,0.84,3.13
c-3.56,3.64-7.36,7.04-11.07,10.53c-10.97,10.3-21.53,21.02-32.17,31.67c-1.94,1.94-2.43,3.65-2.11,6.49
c1.21,10.7,4.27,21.07,5.09,31.87c0.59,7.77,2.86,15.43,4.62,23.08C155.88,177.93,156.1,179.96,155.97,182.35z" >
<animate
attributeName = "x"
from = "1000"
to = "0"
begin = "0s"
dur = "0.5s"
id = "swipe"
/>
</path>
</svg>
This is not animating because <path> elements do not have an x attribute.
Try this animateColor tag , it will start animating.
<animateColor
attributeName="fill"
attributeType="XML"
from="black"
to="grey"
dur=".5s"
repeatCount="indefinite"/>
When loading a SVG and rendering it to the canvas, the text contained in the path group is always centered. In the example below the text should be placed in the upper left corner.
SVG:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="269.29px" height="269.29px" viewBox="0 0 269.29 269.29" xml:space="preserve">
<text transform="matrix(1 0 0 1 7.5107 14.2222)" font-family="Arial" font-size="12">Text in the corner</text>
</svg>
JS:
fabric.loadSVGFromURL(uri, function (svg, options) {
var group = new fabric.PathGroup(svg, options);
canvas.add(group);
});
Any rect, circle etc. within the pathgroup would be displayed as expected. So why is my text not displayed properly?
I haven't used fabric.js, but you're probably missing the x and y attributes. Also, add text-anchor="start" so it's easier to position:
<text transform="matrix(1 0 0 1 7.5107 14.2222)" font-family="Arial" font-size="12" text-anchor="start" x="0" y="0">Text in the corner</text>
I'm new to SVG and a bit surprised that this example is cropped and not scaled? Whats missing to make it scaleable/sizeable using width/height in the svg element?
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="200px"
height="200px"
viewBox="0 0 400px 400px">
<g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<circle cx="200px" cy="60px" r="100" fill="red"
transform="translate(0,50)" />
<circle cx="200px" cy="60px" r="100" fill="blue"
transform="translate(70,150)" />
<circle cx="200px" cy="60px" r="100" fill="green"
transform="translate(-70,150)" />
</g>
</svg>
Because if your viewBox is invalid the viewport is determined by the width and height of the outermost element (in your case the SVG element at 200x200px). Since your content overflows this it is cropped.
By defining a valid viewBox of 400x400 you gave your content enough room inside the viewBox but it was all scaled to fit inside the SVG element. The viewBox is a sort of virtual space mapped onto the real space.
The issue is fairly involved. The viewport and the viewbox are different things. The spec covers both in detail: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute