why is text always centered to canvas - text

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>

Related

Openlayers 4 shows only 1/4 of SVG image

I'm trying to mark a coordinates with SVG icon in Openlayers 4.3.3:
import ControllerRecordIcon from '../icons/entypo/controller-record.svg';
vector.setStyle(new Style({
image: new IconStyle({
scale: 0.5,
src: ControllerRecordIcon
})
}));
map.addLayer(vector);
Icon is from Entypo package and this is the code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 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" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
You can see the problem in the attached image. There is only top left quarter of icon visible and it's not centered on coordinates (red dot marks the coordinates). Scaling doesn't help, icon gets smaller but still shows only 1/4 of image and is not centered.
I tried multiple params from Icon API, but they either make no difference or icon disappears completely.

<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='20' height='20' xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
use this one

SVG position from x="0" y="0"

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.

Proper SVG markup for external files to be loaded with Snap.svg

So here's the deal, I'm making some experiments with SVG and Snap.svg. I have an external SVG file, logo.svg, that was created with Adobe Illustrator, here's the markup:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="161.875px" height="144px" viewBox="0 0 161.875 144" enable-background="new 0 0 161.875 144" xml:space="preserve">
<polygon fill="#006098" points="144,144 27,144 57,0 144,0 144,54 161.875,72 144,90 "/>
<polygon fill="#00416A" points="57,144 0,144 0,0 87,0 "/>
<polygon fill="#98D5E9" points="72,57 72,27 87,27 117,27 117,57 117,72 117,94.5 117,117 87,117 87,94.5 57,94.5 57,72 87,72
87,57 "/>
<polygon fill="#288DC1" points="57,57 75.125,57 81.375,27 57,27 27,27 27,57 27,72 27,94.5 27,117 57,117 57,94.5 67.313,94.5
72,72 57,72 "/>
</svg>
I want to use this example and explore Snap.svg animations, so I'm loading it this way:
(...)
var s = Snap(element);
Snap.load('/images/logo.svg', function(f) {
s.append(f);
});
(...)
But for this to work my element must be a <svg>, so I end up with a <svg> inside a <svg>:
<svg logo-svg>
<desc>Created with Snap</desc>
<defs></defs>
<svg version="1.1" id="Layer_1" x="0px" y="0px" width="161.875px" height="144px" viewBox="0 0 161.875 144" enable-background="new 0 0 161.875 144" preserveAspectRatio="xMinYMin meet">
<polygon fill="#006098" points="144,144 27,144 57,0 144,0 144,54 161.875,72 144,90 "></polygon>
<polygon fill="#00416A" points="57,144 0,144 0,0 87,0 "></polygon>
<polygon fill="#98D5E9" points="72,57 72,27 87,27 117,27 117,57 117,72 117,94.5 117,117 87,117 87,94.5 57,94.5 57,72 87,72
87,57 "></polygon>
<polygon fill="#288DC1" points="57,57 75.125,57 81.375,27 57,27 27,27 27,57 27,72 27,94.5 27,117 57,117 57,94.5 67.313,94.5
72,72 57,72 "></polygon>
</svg>
</svg>
Somehow I fill this is a bit messy, is this correct? Or there's a better way to load external SVG files?

I think the principle is fine, ie often you may load quite a few SVGs and they need to be inside another SVG.
Plus Snap.load is actually taking a document fragment which needs appending to something. So to me it makes sense, but if you can highlight certain problems you are facing because of this, it could be there is a workaround.
I'm just going to post an example to adjust the main paper to the new svg which could be used...
var s = Snap("#svgpaper");
var bird = Snap.load("bird.svg", function ( loadedFragment ) {
var b = s.append( loadedFragment );
var bbox = b.getBBox();
var vbox = bbox.x + " " + bbox.y + " " + bbox.width + " " + bbox.height;
s.attr({ viewBox: vbox });
} );
testing example here

SVG graphic with animate tag is not animating

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"/>

How can a SVG sprite be made using independent SVG images?

How can I combine SVG icons from http://raphaeljs.com/icons/ to make a CSS Sprite.
When I do this:
<?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"
width="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">
<g id="icons">
<g id="linkedin">
<path d="M27.25,3.125h-22c-1.104,0-2,0.896-2,2v22c0,1.104,0.896,2,2,2h22c1.104,0,2-0.896,2-2v-22C29.25,4.021,28.354,3.125,27.25,3.125zM11.219,26.781h-4v-14h4V26.781zM9.219,11.281c-1.383,0-2.5-1.119-2.5-2.5s1.117-2.5,2.5-2.5s2.5,1.119,2.5,2.5S10.602,11.281,9.219,11.281zM25.219,26.781h-4v-8.5c0-0.4-0.403-1.055-0.687-1.213c-0.375-0.211-1.261-0.229-1.665-0.034l-1.648,0.793v8.954h-4v-14h4v0.614c1.583-0.723,3.78-0.652,5.27,0.184c1.582,0.886,2.73,2.864,2.73,4.702V26.781z"
/>
</g>
<g id="github">
<path d="M 500 800 M28.436,15.099c-1.201-0.202-2.451-0.335-3.466-0.371l-0.179-0.006c0.041-0.09,0.072-0.151,0.082-0.16c0.022-0.018,0.04-0.094,0.042-0.168c0-0.041,0.018-0.174,0.046-0.35c0.275,0.01,0.64,0.018,1.038,0.021c1.537,0.012,3.145,0.136,4.248,0.331c0.657,0.116,0.874,0.112,0.389-0.006c-0.491-0.119-1.947-0.294-3.107-0.37c-0.779-0.053-1.896-0.073-2.554-0.062c0.019-0.114,0.041-0.241,0.064-0.371c0.093-0.503,0.124-1.009,0.126-2.016c0.002-1.562-0.082-1.992-0.591-3.025c-0.207-0.422-0.441-0.78-0.724-1.104c0.247-0.729,0.241-1.858-0.015-2.848c-0.211-0.812-0.285-0.864-1.021-0.708C22.19,4.019,21.69,4.2,21.049,4.523c-0.303,0.153-0.721,0.391-1.024,0.578c-0.79-0.278-1.607-0.462-2.479-0.561c-0.884-0.1-3.051-0.044-3.82,0.098c-0.752,0.139-1.429,0.309-2.042,0.511c-0.306-0.189-0.75-0.444-1.067-0.604C9.973,4.221,9.473,4.041,8.847,3.908c-0.734-0.157-0.81-0.104-1.02,0.708c-0.26,1.003-0.262,2.151-0.005,2.878C7.852,7.577,7.87,7.636,7.877,7.682c-1.042,1.312-1.382,2.78-1.156,4.829c0.059,0.534,0.15,1.024,0.277,1.473c-0.665-0.004-1.611,0.02-2.294,0.064c-1.162,0.077-2.618,0.25-3.109,0.369c-0.484,0.118-0.269,0.122,0.389,0.007c1.103-0.194,2.712-0.32,4.248-0.331c0.29-0.001,0.561-0.007,0.794-0.013c0.07,0.237,0.15,0.463,0.241,0.678L7.26,14.759c-1.015,0.035-2.264,0.168-3.465,0.37c-0.901,0.151-2.231,0.453-2.386,0.54c-0.163,0.091-0.03,0.071,0.668-0.106c1.273-0.322,2.928-0.569,4.978-0.741l0.229-0.02c0.44,1.022,1.118,1.802,2.076,2.41c0.586,0.373,1.525,0.756,1.998,0.816c0.13,0.016,0.508,0.094,0.84,0.172c0.333,0.078,0.984,0.195,1.446,0.262h0.011c-0.009,0.006-0.017,0.01-0.025,0.016c-0.56,0.291-0.924,0.744-1.169,1.457c-0.11,0.033-0.247,0.078-0.395,0.129c-0.529,0.18-0.735,0.217-1.271,0.221c-0.556,0.004-0.688-0.02-1.02-0.176c-0.483-0.225-0.933-0.639-1.233-1.133c-0.501-0.826-1.367-1.41-2.089-1.41c-0.617,0-0.734,0.25-0.288,0.615c0.672,0.549,1.174,1.109,1.38,1.537c0.116,0.24,0.294,0.611,0.397,0.824c0.109,0.227,0.342,0.535,0.564,0.748c0.522,0.498,1.026,0.736,1.778,0.848c0.504,0.074,0.628,0.074,1.223-0.002c0.287-0.035,0.529-0.076,0.746-0.127c0,0.244,0,0.525,0,0.855c0,1.766-0.021,2.334-0.091,2.5c-0.132,0.316-0.428,0.641-0.716,0.787c-0.287,0.146-0.376,0.307-0.255,0.455c0.067,0.08,0.196,0.094,0.629,0.066c0.822-0.051,1.403-0.355,1.699-0.891c0.095-0.172,0.117-0.518,0.147-2.318c0.032-1.953,0.046-2.141,0.173-2.42c0.077-0.166,0.188-0.346,0.25-0.395c0.104-0.086,0.111,0.084,0.111,2.42c-0.001,2.578-0.027,2.889-0.285,3.385c-0.058,0.113-0.168,0.26-0.245,0.33c-0.135,0.123-0.192,0.438-0.098,0.533c0.155,0.154,0.932-0.088,1.356-0.422c0.722-0.572,0.808-1.045,0.814-4.461l0.003-2.004l0.219,0.021l0.219,0.02l0.036,2.621c0.041,2.951,0.047,2.994,0.549,3.564c0.285,0.322,0.572,0.5,1.039,0.639c0.625,0.188,0.813-0.102,0.393-0.605c-0.457-0.547-0.479-0.756-0.454-3.994c0.017-2.076,0.017-2.076,0.151-1.955c0.282,0.256,0.336,0.676,0.336,2.623c0,2.418,0.069,2.648,0.923,3.07c0.399,0.195,0.511,0.219,1.022,0.221c0.544,0.002,0.577-0.006,0.597-0.148c0.017-0.115-0.05-0.193-0.304-0.348c-0.333-0.205-0.564-0.467-0.709-0.797c-0.055-0.127-0.092-0.959-0.117-2.672c-0.036-2.393-0.044-2.502-0.193-2.877c-0.201-0.504-0.508-0.902-0.897-1.166c-0.101-0.066-0.202-0.121-0.333-0.162c0.161-0.016,0.317-0.033,0.468-0.055c1.572-0.209,2.403-0.383,3.07-0.641c1.411-0.543,2.365-1.445,2.882-2.724c0.046-0.114,0.092-0.222,0.131-0.309l0.398,0.033c2.051,0.173,3.706,0.42,4.979,0.743c0.698,0.177,0.831,0.198,0.668,0.105C30.666,15.551,29.336,15.25,28.436,15.099zM22.422,15.068c-0.233,0.512-0.883,1.17-1.408,1.428c-0.518,0.256-1.33,0.451-2.25,0.544c-0.629,0.064-4.137,0.083-4.716,0.026c-1.917-0.188-2.991-0.557-3.783-1.296c-0.75-0.702-1.1-1.655-1.039-2.828c0.039-0.734,0.216-1.195,0.679-1.755c0.421-0.51,0.864-0.825,1.386-0.985c0.437-0.134,1.778-0.146,3.581-0.03c0.797,0.051,1.456,0.051,2.252,0c1.886-0.119,3.145-0.106,3.61,0.038c0.731,0.226,1.397,0.834,1.797,1.644c0.18,0.362,0.215,0.516,0.241,1.075C22.808,13.699,22.675,14.517,22.422,15.068zM12.912,11.762c-1.073-0.188-1.686,1.649-0.863,2.587c0.391,0.445,0.738,0.518,1.172,0.248c0.402-0.251,0.62-0.72,0.62-1.328C13.841,12.458,13.472,11.862,12.912,11.762zM19.425,11.872c-1.073-0.188-1.687,1.647-0.864,2.586c0.392,0.445,0.738,0.519,1.173,0.247c0.401-0.25,0.62-0.72,0.62-1.328C20.354,12.569,19.985,11.971,19.425,11.872zM16.539,15.484c-0.023,0.074-0.135,0.184-0.248,0.243c-0.286,0.147-0.492,0.096-0.794-0.179c-0.187-0.169-0.272-0.258-0.329-0.081c-0.053,0.164,0.28,0.493,0.537,0.594c0.236,0.094,0.405,0.097,0.661-0.01c0.254-0.106,0.476-0.391,0.476-0.576C16.842,15.303,16.595,15.311,16.539,15.484zM16.222,14.909c0.163-0.144,0.2-0.44,0.044-0.597s-0.473-0.133-0.597,0.043c-0.144,0.206-0.067,0.363,0.036,0.53C15.865,15.009,16.08,15.034,16.222,14.909z"
/>
</g>
</g>
</svg>
the SVG icons overlap. How can I modify these to have an offset between two icons?
For instance, the one similar to http://dbushell.com/demos/css-sprites/sprite.svg

Try to replace the 2nd M command to m command.
"M" means absolute position, "m" means relative position.
so,
<M 500 800 ｍ28.436,15.099c-1.201-0.202-2.…

Resources