Related
Input is below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
<g enable-background="new">
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 " transform="matrix(1,0,0,-1,0,600)"/>
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 111.050781 268.679688 L 111.050781 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
<path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 268.679688 L 110.949219 265.421875 " transform="matrix(1,0,0,-1,0,600)"/>
</g>
</svg>
Expected Output is below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600">
<g enable-background="new">
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 265.42 L 109.73 265.69 L 108.7 266.41 L 108.01 267.46 L 107.78 268.68 "/>
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 111.05 268.68 L 111.05 265.42 "/>
<path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 268.68 L 110.95 265.42 "/>
</g>
</svg>
This is about simplifying and beautifying SVG path. I would like the expected output to have the elements of path transform, stroke-width, stroke-linecap, stroke-linejoin, fill stroke and d (rounded to 2 decimals for simplicity).
I have tried let svg_object_alt=document.querySelector('svg').outerHTML;, to convert svg as a string to be read and I am not sure how to extract all the information from it, to be formatted to the expected output? I would really appreciate any help I can obtain :)
I think that the stroke-colour can just hardcode the code number (#929292) into it instead of using the rgb colour :)
you can use that...
const mySvg_Paths = document.querySelectorAll('#my-svg > g > path');
for ( let attr of mySvg_Paths[2].attributes )
{
console.log(attr.name,'-->\n', attr.value);
}
// or
// console.log( 'outerHTML -->\n', mySvg_Paths[2].outerHTML );
// console.log( 'path.d -->\n', mySvg_Paths[2].getAttribute('d'));
#my-svg {
width : 800pt;
height : 600pt;
background : lightgreen;
}
#my-svg path {
fill : none;
stroke-width : 0.074;
stroke-linecap : round;
stroke-linejoin : round;
stroke : rgb(50.19989%, 50.19989%, 50.19989%);
stroke-opacity : 1;
stroke-miterlimit : 10;
}
<svg id="my-svg" viewBox="0 0 800 600">
<g enable-background="new">
<path
d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 "
transform="matrix(1,0,0,-1,0,600)"/>
<path
d="M 111.050781 268.679688 L 111.050781 265.421875 "
transform="matrix(1,0,0,-1,0,600)" />
<path
style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;"
d="M 110.949219 268.679688 L 110.949219 265.421875 "
transform="matrix(1,0,0,-1,0,600)"/>
</g>
</svg>
then, you can have a look to -> Use RegEx to parse a string with complicated delimiting
specialy this function:
function parseData(pathData)
{
var pieces = pathData.match(/([a-z]+[-.,\d ]*)/gi), i;
/* now parse each piece into its own array */
for (i=0; i<pieces.length; i++)
pieces[i] = pieces[i].match(/([a-z]+|-?[.\d]*\d)/gi);
return pieces;
}
Lets assume I have programmatically created a circle and some text,
that I want to align along the circle.
I am able to do so using the textPath element.
In addition I have a rectangular image (or any svg group <g>),
that I also would like to align to the circle
(the red rectangle in the image below is just an example; actually I would like to be able to align arbitrary svg groups <g> as image labels on the nodes of a chord diagram.).
However, textPath only seems to work for text elements.
=> Is there something similar that works for group elements?
Or do I need to manually calculate the transformation for my group
(following from some tangent of the circle)?
(A workaround could be to create some hidden text with a single letter and
the same size as my group ... align it and grab its transformation. However, that feels ugly.)
In addition I have a rectangular image (or any svg group ), that I
also would like to align to the circle (see red rectangle in the
example image below).
However, textPath only seems to work for text elements.
You can use the rectangle unicode character ▮
In this case you will be able to include it in one textPath command along with other words
<svg width="400" height="400" viewBox="0 0 400 400">
<path id="pathChain" d="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style="fill:#089421;"/>
<text font-size="36" font-family="Times New Roman" fill="grey" >
<textPath id="result" startOffset="7%" xlink:href="#pathChain">
<tspan dx="0" dy="-5" fill="black" font-size="48px"> Hello World </tspan> <tspan dx="-20" dy="-10" fill="red" font-size="72px"> ▮</tspan>
</textPath>
</text>
</svg>
You can use any unicode character that suits you
<svg width="400" height="400" viewBox="0 0 400 400">
<path id="pathChain" d="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style="fill:#089421;"/>
<text font-size="36" font-family="Times New Roman" fill="grey" >
<textPath id="result" startOffset="7%" xlink:href="#pathChain">
<tspan dx="0" dy="-5" fill="black" font-size="48px"> Hello World </tspan> <tspan dx="-5" fill="red" font-size="72px"> ⮔</tspan>
</textPath>
</text>
</svg>
If necessary, you can make the animation of the letters
<svg width="400" height="400" viewBox="0 0 400 400">
<path id="pathChain" d="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style="fill:#089421;"/>
<text font-size="36" font-family="Times New Roman" fill="grey" >
<textPath id="result" xlink:href="#pathChain">
<tspan dx="0" dy="-5" fill="black" font-size="48px"> Hello World </tspan> <tspan dx="-5" fill="red" font-size="72px"> ⮔</tspan>
<animate dur="10s" repeatCount="5" attributeName="startOffset" values="5%;50%;50%;5%;5%"/>
</textPath>
</text>
</svg>
As #Paul LeBeau commented:
No there is no automatic way to do that. You have to position it
yourself
Consider adding svg images to text using absolute positioning
Since any text in SVG is a vector object, it has absolute coordinates x, y, as the first character of the word and the last.
Using this you can position an icon or any other vector image to the beginning or end of the text.
I put the icon in the <symbol> tag and position it at the end of the word using the <use> tag
<use xlink:href="#speaker" x="245" y="35" />
<svg width="400" height="400" viewBox="0 0 400 400">
<symbol>
<g id="speaker" style="transform-origin:center;transform-box: fill-box;transform:rotate(15deg);" >
<path fill="#089421" d="M28,7.1v2c7.3,1,13,7.3,13,14.9s-5.7,13.9-13,14.9v2c8.4-1,15-8.2,15-16.9S36.4,8.1,28,7.1z"/>
<path fill="#546E7A" d="M14,32H7c-1.1,0-2-0.9-2-2V18c0-1.1,0.9-2,2-2h7V32z"/>
<polygon fill="#78909C" points="26,42 14,32 14,16 26,6"/>
<path fill="#089421" d="M28,17.3v2.1c1.8,0.8,3,2.5,3,4.6s-1.2,3.8-3,4.6v2.1c2.9-0.9,5-3.5,5-6.7S30.9,18.2,28,17.3z"/>
<path fill="#089421" d="M28,12.2v2c4.6,0.9,8,5,8,9.8s-3.4,8.9-8,9.8v2c5.7-1,10-5.9,10-11.8S33.7,13.1,28,12.2z"/>
</g>
</symbol>
<path id="pathChain" d="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style="fill:#089421;"/>
<text font-size="36" font-family="Times New Roman" fill="grey" >
<textPath id="result" xlink:href="#pathChain">
<tspan dx="0" dy="-5" fill="black" font-size="48px"> Hello Wordl </tspan>
</textPath>
</text>
<use xlink:href="#speaker" x="245" y="35" />
</svg>
An example with a growing line on which text and an icon are located
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1">
<symbol id="grow">
<g>
<circle fill="#FF9800" cx="28" cy="9" r="5"/>
</g>
<path fill="#00796B" d="M29,27.3l-9.2-4.1c-1-0.5-1.5,1-2,2c-0.5,1-4.1,7.2-3.8,8.3c0.3,0.9,1.1,1.4,1.9,1.4c0.2,0,0.4,0,0.6-0.1 L28.8,31c0.8-0.2,1.4-1,1.4-1.8C30.2,28.4,29.7,27.6,29,27.3z"/>
<path fill="#009688" d="M26.8,15.2l-2.2-1c-1.3-0.6-2.9,0-3.5,1.3L9.2,41.1c-0.5,1,0,2.2,1,2.7c0.3,0.1,0.6,0.2,0.9,0.2 c0.8,0,1.5-0.4,1.8-1.1c0,0,9.6-13.3,10.4-14.9s4.9-9.3,4.9-9.3C28.7,17.4,28.2,15.8,26.8,15.2z"/>
<path fill="#FF9800" d="M40.5,15.7c-0.7-0.8-2-1-2.8-0.3l-5,4.2l-6.4-3.5c-1.1-0.6-2.6-0.4-3.3,0.9c-0.8,1.3-0.4,2.9,0.8,3.4 l8.3,3.4c0.3,0.1,0.6,0.2,0.9,0.2c0.5,0,0.9-0.2,1.3-0.5l6-5C41.1,17.8,41.2,16.6,40.5,15.7z"/>
<path fill="#FF9800" d="M11.7,23.1l3.4-5.1l4.6,0.6l1.5-3.1c0.4-0.9,1.2-1.4,2.1-1.5c-0.1,0-0.2,0-0.2,0h-9c-0.7,0-1.3,0.3-1.7,0.9 l-4,6c-0.6,0.9-0.4,2.2,0.6,2.8C9.2,23.9,9.6,24,10,24C10.6,24,11.3,23.7,11.7,23.1z"/>
</symbol>
<path id="txtPath" d="m22 366c0 0 59-24 74-50C132 253 129 213 128 161 125 33 200 2 200 2" style="fill:none;stroke:#00796B;stroke-width:3"/>
<use xlink:href="#grow" x="123" y="10" />
<text dx="0" dy="-10px" font-size="20" font-family="Times New Roman" fill="#414141" >
<textPath id="result" startOffset="5%" xlink:href="#txtPath"> Stock growth in the first half of the year </textPath>
</text>
</svg>
One more example
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1">
<symbol id="Cactus" style="transform-origin:center;transform-box: fill-box;transform:rotate(15deg);">
<path fill="#7CB342" d="M35.3,9.6c-1.6-0.2-1.3,0.9-1.9,2.7l-1,4.3c-0.3,1-0.7,1.4-2,1.3L25,17.3c-1.6-0.2-3.1,1-3.2,2.6 c-0.2,1.6,1,3.1,2.6,3.2l6.3,0.7c3,0.3,5.5-0.9,6-5.4c0,0,0.6-4.7,0.3-6.6C36.7,10.2,36.6,9.7,35.3,9.6z"/>
<path fill="#7CB342" d="M12.2,13.6c1.6-0.1,1.3,0.9,1.9,2.8l1.3,6.3c0.3,1,0.7,1.4,2,1.3l5.4-0.4c1.6-0.1,3,1.1,3.2,2.7 c0.1,1.6-1.1,3-2.7,3.2l-6.3,0.5c-3,0.2-5.5-1-5.9-5.5c0,0-0.8-6.7-0.5-8.5C10.7,14.2,10.8,13.7,12.2,13.6z"/>
<path fill="#8BC34A" d="M24,5c-2.4,0-4,0.6-4.5,3.2c0,0-2.1,16.9,0,32.1c0.3,3.2,2,1.2,4.4,1.2s3.8,2.7,4.4-0.8 c2.5-15.1,0-32.6,0-32.6C27.7,5.2,26.4,5,24,5z"/>
<path fill="#FFB74D" d="M38.8,43H9.2c0,0,4.9-2.3,14.8-2.3S38.8,43,38.8,43z"/>
</symbol>
<path id="txtPath" d="m200 2c0 0 36 31 57 42 15 8 34 6 47 16 15 11 26 27 33 43 8 18 2 41 11 58 9 17 41 40 41 40" fill="none" stroke="green" stroke-width="2"/>
<use xlink:href="#Cactus" x="355" y="150" />
<text font-size="20" font-family="Times New Roman" fill="grey" >
<textPath id="result" startOffset="7%" xlink:href="#txtPath">
<tspan dx="0" dy="-5" fill="black" >Decrease in stocks per year </tspan>
</textPath>
</text>
</svg>
As a starting point here is the workaround I mentioned.
It uses some invisible placeholder text and extracts the transformation information with
placeHolder.getBoundingClientRect();
and
placeHolder.getRotationOfChar(0);
The result is only an approximation that depends on the font size and on the character of the placeholder.
var svg = document.getElementById('svg');
var text = document.createElement('text');
text.setAttribute('fill','black');
svg.appendChild(text);
var placeHolder = document.getElementById('placeholder');
var placeHolderBounds = placeHolder.getBoundingClientRect();
var angle = placeHolder.getRotationOfChar(0);
var group = document.getElementById('my-group');
var groupBounds = group.getBoundingClientRect();
var dx = 0; //groupBounds.width/2;
var dy = -groupBounds.height;
var x = placeHolderBounds.x;
var y = placeHolderBounds.y;
var transform = 'translate(' + x +','+ y +') '+
'rotate('+ angle +') '+
'translate('+ dx +','+ dy +')';
group.setAttribute('transform', transform);
<svg id='svg' width="400" height="400" viewBox="0 0 400 400">
<path id="my-path" d="M87 199C87 114 141 64 200 64 258 64 310 122 313 199 315 273 258 335 200 335 141 335 87 279 87 199Z" style="fill:#089421;"/>
<g id="my-group">
<rect width="30" height="20" style="fill:red"/>
</g>
<text font-size="12px" >
<textPath startOffset="10%" xlink:href="#my-path">
<tspan>Hello World</tspan><tspan id='placeholder' visibility="hidden" >-</tspan>
</textPath>
</text>
</svg>
I am working with svg animation right now. I want to setup morph animation on this svg. For example the vibe icon will be morph with Wibe on hover of the image. I try few examples from the stackoverflow. But that is not working. Right now the current animation on this image is rotating E of wibe and floating vibe icon.
Please help me regarding this issue. How can I use morph animation in this.
Thanks
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1491.3333 803.33069"
height="500"
width="700"
xml:space="preserve"
id="svg2"
version="1.1" style="
background-color: #000;
"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath18"
clipPathUnits="userSpaceOnUse"><path
id="path16"
d="M 0,602.498 H 1118.496 V 0 H 0 Z" /></clipPath></defs><g
transform="matrix(1.3333333,0,0,-1.3333333,0,803.33067)"
id="g10"><g
id="g12"><g
clip-path="url(#clipPath18)"
id="g14"><g
transform="translate(665.3598,379.7295)"
id="g20"><path
id="path22"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 0,0 h 26.962 c 13.938,0 23.293,3.023 28.064,9.077 4.763,6.046 7.149,12.378 7.149,18.979 0,6.235 -2.475,12.003 -7.427,17.33 C 49.789,50.705 40.72,53.36 27.517,53.36 23.481,53.36 18.8,53.262 13.481,53.083 8.17,52.902 3.676,52.625 0,52.265 Z m 0,-57.764 v -56.668 c 1.111,0 4.044,-0.18 8.807,-0.548 4.772,-0.367 11.193,-0.547 19.257,-0.547 15.409,0 26.407,2.566 33.001,7.696 6.609,5.139 9.91,12.296 9.91,21.456 0,3.675 -0.638,7.246 -1.921,10.727 -1.29,3.481 -3.578,6.512 -6.879,9.085 -3.301,2.565 -7.891,4.673 -13.758,6.316 -5.859,1.658 -13.563,2.483 -23.098,2.483 z m -91.859,165.587 c 7.337,1.095 15.769,2.108 25.303,3.023 9.535,0.923 19.25,1.74 29.152,2.483 9.911,0.728 19.535,1.276 28.882,1.643 9.355,0.368 17.509,0.548 24.486,0.548 45.843,0 80.134,-6.504 102.872,-19.527 22.738,-13.016 34.103,-33.278 34.103,-60.787 0,-13.931 -3.203,-25.761 -9.625,-35.483 -6.414,-9.715 -15.131,-18.057 -26.129,-25.034 15.402,-5.506 28.057,-13.383 37.959,-23.645 9.91,-10.278 14.854,-24.756 14.854,-43.473 0,-33.728 -12.468,-57.104 -37.411,-70.134 -24.937,-13.016 -61.793,-19.528 -110.569,-19.528 -12.836,0 -29.617,0.458 -50.337,1.373 -20.727,0.923 -41.898,2.851 -63.54,5.784 z m -25.049,-282.757 c -9.535,-1.47 -18.154,-2.573 -25.859,-3.3 -7.697,-0.743 -14.666,-1.111 -20.9,-1.111 -6.233,0 -13.21,0.368 -20.907,1.111 -7.704,0.727 -16.129,1.83 -25.296,3.3 v 283.852 c 8.057,1.838 16.031,3.121 23.923,3.848 7.892,0.743 15.491,1.111 22.828,1.111 6.969,0 14.494,-0.368 22.55,-1.111 8.072,-0.727 15.957,-2.01 23.661,-3.848 z m -237.89,119.924 34.102,163.928 c 2.941,0.735 8.62,1.463 17.06,2.206 8.439,0.727 17.426,1.095 26.961,1.095 12.1,0 22.828,-0.368 32.182,-1.095 9.348,-0.743 16.039,-1.471 20.076,-2.206 l -89.129,-283.304 c -6.234,-1.838 -13.016,-3.031 -20.345,-3.578 -7.344,-0.548 -14.674,-0.818 -22.003,-0.818 -7.344,0 -14.771,0.27 -22.287,0.818 -7.51,0.547 -15.304,1.74 -23.376,3.578 l -40.157,154.034 c -6.969,-24.576 -14.028,-50.427 -21.184,-77.569 -7.15,-27.141 -14.029,-52.625 -20.631,-76.465 -7.697,-1.838 -15.311,-3.031 -22.827,-3.578 -7.518,-0.548 -14.944,-0.818 -22.273,-0.818 -7.344,0 -14.674,0.27 -22.011,0.818 -7.336,0.547 -14.118,1.74 -20.352,3.578 l -86.368,283.304 c 4.029,0.735 11.095,1.463 21.178,2.206 10.083,0.727 21.177,1.095 33.278,1.095 9.535,0 18.799,-0.368 27.786,-1.095 8.987,-0.743 14.936,-1.471 17.877,-2.206 l 35.761,-168.332 39.609,168.332 c 6.234,1.838 13.113,3.031 20.63,3.586 7.509,0.54 14.936,0.825 22.273,0.825 7.336,0 14.763,-0.285 22.287,-0.825 7.517,-0.555 15.124,-1.748 22.821,-3.586 z" /></g><g
transform="translate(220.8446,208.5321)"
id="g24"><path
id="path26"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C 62.399,-4.247 111.294,-96.425 205.706,-86.576 172.84,-130.659 92.497,-208.532 24.911,-208.532 -117.925,-208.532 -130.651,8.887 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(580.4182,121.9514)"
id="g28"><path
id="path30"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C -85.441,36.938 -117.17,22.297 -153.931,0 -105.978,83.683 -54.72,98.899 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(653.5858,147.7134)"
id="g32"><path
id="path34"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C -13.413,-15.054 -31.372,-29.682 -73.072,-25.757 -16.196,-124.558 53.294,-118.125 91.542,-83.726 164.849,-17.787 68.09,76.417 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(925.3088,392.7031)"
id="g36"><path
id="path38"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 0,0 c 0,0 0,41.564 40.817,43.368 40.271,1.78 44.37,-43.33 44.37,-43.33 z M 81.95,103.607 C -68.673,133.163 -111.656,-7.91 -72.935,-117.879 c 0,0 48.014,-94.48 168.825,-63.503 l -1.549,75.894 c 0,0 -80.541,-21.684 -86.736,37.172 l 159.346,2.403 c 0,0 34.441,146.082 -85.001,169.52" /><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" begin="g10.mouseover" repeatCount="1" end="g10.mouseout" /></g></g></g></g>
</svg>
I have this svg path:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500' height='500'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 189,100.09448 200,0" id="arrowline"></path></svg>
I want to be able to increase and decrease the length of the "#arrowline" path, with an animation, keeping the arrowhead also in the correct place while animating. I tried various methods but they were either too complicated for implementing or didn't work. Probably I am missing something. Any help appreciated. Thank you.
I don't know what you mean by "correct" - do you mean the following?
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='500px' height='500px'>
<defs id="def">
<marker orient="auto" refY="0.0" refX="-3" id="Arrow2Mend" style="overflow:visible;">
<path id="path3900" style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;" d="M -15 -5 L 0 0 L -15 5 z" transform="scale(0.5)"></path>
</marker>
</defs>
<path style="fill:none;stroke:#000000;stroke-width:2.58384609;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;marker-end:url(#Arrow2Mend)" d="m 10 10 l200,0" id="arrowline">
<animate attributeName="d" from="m 10 10 l200,0" to="m 10 10 l400,0" dur="1s" repeatCount="indefinite"/>
</path>
</svg>
I have a directive that should append a SVG element to the directive element
.directive('aSvg', function ($compile) {
return {
restrict: 'E',
replace: true,
link: function (scope, element, attrs) {
var svgTag = angular.element('<svg viewBox="0 0 4000 2000" version="1.1"><defs><marker id="StartMarker" viewBox="0 0 12 12" refX="12" refY="6" markerWidth="3" markerHeight="3" stroke="green" stroke-width="2" fill="none" orient="auto"><circle cx="6" cy="6" r="5"></circle></marker><marker id="MidMarker" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="3" markerHeight="3" stroke="lightblue" stroke-width="2" fill="none" orient="auto"><path d="M 0 0 L 10 10 M 0 10 L 10 0"></path></marker><marker id="EndMarker" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="3" markerHeight="3" stroke="red" stroke-width="2" fill="none"><rect x="0" y="0" width="10" height="10"></rect></marker></defs><path d="M 200 250 L 700 100 L 900 350 L 1200 400 L 1300 200 L 1700 680 L 2200 680 L 2600 400" fill="none" stroke="black" stroke-width="50" marker-start="url(#StartMarker)" marker-mid="url(#MidMarker)" marker-end="url(#EndMarker)"></path><path d="M 1000 750 S 2000 750 2500 1250 S 1200 1000 1300 1400 S 1700 1480 1900 1200" fill="none" stroke="tomato" stroke-width="50" marker-start="url(#StartMarker)" marker-mid="url(#MidMarker)" marker-end="url(#EndMarker)"></path></svg>');
$compile(svgTag)(scope);
angular.element(svtTag).appendTo(element[0]);
}
};
});
And in html I have the directive as an element:
<body>
<div>
<a-svg></a-svg>
</div>
</body>
However the SVG is not rendering correctly, only the 2 lines (black and orange) appear but there are no markers rendered. The SVG used in the example seems to be correct, because it renders correctly if I save it to a file, but for some reason it's not working in AngularJS.
What am I missing here?
Thanks in advance.
Edit 1: I was using AngularJS v1.2.20, I tried with v1.3.0 but still have the same problem.
After more researching I found out that the problem was in Angular routing, more specifically in the <base href='/'> tag that was messing around with the links defined in the SVG markers.
I solved my problem by changing the url in the markers attributes of each path (note the /myroute in the marker-start, marker-mid and marker-end attributes):
<path d="M 200 250 L 700 100 L 900 350 L 1200 400 L 1300 200 L 1700 680 L 2200 680 L 2600 400" fill="none" stroke="black" stroke-width="50" marker-start="url(/myroute#StartMarker)" marker-mid="url(/myroute#MidMarker)" marker-end="url(/myroute#EndMarker)"></path>
For more details, I suggest reading the accepted answer for the question here.