Related
On firefox the left edges of these SVGs are getting cut off at a certain windows size:
In Chrome its working. Does anybody knows why this is happening?
Some Firefox-internal bug? I already removed all styles from the svg, but its still not working. Setting the width to 100% isn't working either.
Contact SVG Source Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, 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="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="77px" height="30px" viewBox="0 0 77 30" enable-background="new 0 0 77 30" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#333333" d="M0,15c0,7.95,6.18,14.45,14,14.97c0.33,0.02,0.66,0.03,1,0.03h46
v-0.03c0.33,0.02,0.66,0.03,1,0.03c8.28,0,15-6.72,15-15S70.28,0,62,0c-0.34,0-0.67,0.01-1,0.03V0H15c-0.34,0-0.67,0.01-1,0.03
C6.18,0.55,0,7.05,0,15z M14,29.97V30h1C14.66,30,14.33,29.99,14,29.97z M15,0h-1v0.03C14.33,0.01,14.66,0,15,0z"/>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M14.59,17.11c0.22,0.62,0.52,1.16,0.91,1.58
c0.38,0.43,0.83,0.76,1.36,0.98c0.53,0.22,1.09,0.33,1.72,0.33c0.62,0,1.19-0.11,1.69-0.34c0.48-0.22,0.92-0.55,1.31-0.99
l-0.7-0.76c-0.32,0.36-0.66,0.62-1.02,0.81C19.5,18.91,19.08,19,18.61,19c-0.47,0-0.89-0.09-1.27-0.28
c-0.37-0.19-0.7-0.45-0.95-0.81c-0.26-0.35-0.47-0.77-0.61-1.27c-0.15-0.48-0.22-1.05-0.22-1.67c0-0.6,0.07-1.14,0.22-1.64
c0.16-0.49,0.36-0.91,0.64-1.25c0.27-0.35,0.6-0.61,0.97-0.8C17.77,11.09,18.2,11,18.67,11c0.42,0,0.8,0.09,1.11,0.25
c0.31,0.16,0.6,0.37,0.86,0.66l0.7-0.8c-0.29-0.28-0.67-0.55-1.11-0.77C19.78,10.12,19.25,10,18.66,10c-0.63,0-1.22,0.12-1.75,0.34
c-0.53,0.24-1,0.57-1.39,1c-0.39,0.44-0.69,0.96-0.91,1.58c-0.22,0.63-0.33,1.31-0.33,2.08C14.28,15.78,14.38,16.48,14.59,17.11z"
/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M24.61,15.5c0.09-0.31,0.23-0.58,0.42-0.8
c0.19-0.22,0.41-0.39,0.67-0.51c0.25-0.13,0.55-0.19,0.86-0.19c0.32,0,0.6,0.06,0.86,0.19c0.25,0.12,0.47,0.29,0.66,0.51
c0.19,0.22,0.33,0.49,0.44,0.8c0.09,0.31,0.15,0.64,0.15,1.02c0,0.37-0.06,0.71-0.15,1.01c-0.11,0.31-0.25,0.56-0.44,0.78
c-0.19,0.22-0.41,0.39-0.66,0.52C27.16,18.95,26.88,19,26.56,19c-0.31,0-0.61-0.05-0.86-0.17c-0.26-0.13-0.48-0.3-0.67-0.52
c-0.19-0.22-0.33-0.47-0.42-0.78c-0.09-0.3-0.14-0.64-0.14-1.01C24.47,16.14,24.52,15.81,24.61,15.5z M23.47,18
c0.19,0.44,0.42,0.8,0.73,1.09c0.32,0.3,0.68,0.52,1.08,0.68c0.41,0.15,0.83,0.23,1.28,0.23c0.44,0,0.88-0.08,1.28-0.23
c0.41-0.16,0.77-0.38,1.08-0.68c0.31-0.29,0.55-0.65,0.74-1.09c0.18-0.44,0.28-0.92,0.28-1.48c0-0.57-0.1-1.05-0.28-1.49
c-0.19-0.44-0.43-0.8-0.74-1.11c-0.31-0.3-0.67-0.53-1.08-0.69C27.44,13.08,27,13,26.56,13c-0.45,0-0.87,0.08-1.28,0.23
c-0.4,0.16-0.76,0.39-1.08,0.69c-0.31,0.31-0.54,0.67-0.73,1.11c-0.19,0.44-0.28,0.92-0.28,1.49C23.19,17.08,23.28,17.56,23.47,18z
"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M31.73,20h1.22v-4.98c0.38-0.33,0.71-0.58,1-0.75
c0.28-0.18,0.63-0.27,1-0.27c0.47,0,0.83,0.16,1.05,0.44c0.22,0.28,0.33,0.75,0.33,1.39V20h1.23v-4.33c0-0.87-0.18-1.55-0.53-2
C36.67,13.23,36.11,13,35.34,13c-0.51,0-0.96,0.11-1.34,0.3c-0.39,0.18-0.75,0.43-1.09,0.72h-0.05L32.75,13h-1.02V20z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M39.94,17.75c0,0.34,0.03,0.64,0.11,0.92
c0.06,0.28,0.18,0.52,0.34,0.7c0.16,0.21,0.38,0.36,0.64,0.47c0.27,0.11,0.6,0.16,1,0.16c0.22,0,0.45-0.02,0.69-0.08l0.66-0.19
l-0.24-0.92c-0.12,0.06-0.26,0.11-0.42,0.14C42.56,18.98,42.44,19,42.31,19c-0.42,0-0.72-0.11-0.87-0.33
c-0.17-0.22-0.25-0.55-0.25-0.97V14h1.97v-1h-1.97v-2.03h-1.03L40,13l-1.14,0.08V14h1.08V17.75z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M45.75,17.8c0.11-0.13,0.3-0.25,0.55-0.35
c0.25-0.09,0.59-0.18,1.01-0.26c0.41-0.07,0.92-0.13,1.55-0.19v1.19c-0.36,0.28-0.69,0.48-1,0.61c-0.31,0.14-0.66,0.2-1,0.2
c-0.38,0-0.67-0.05-0.92-0.17c-0.25-0.13-0.36-0.33-0.36-0.61C45.58,18.06,45.63,17.92,45.75,17.8z M44.97,19.55
c0.41,0.31,0.92,0.45,1.55,0.45c0.43,0,0.87-0.08,1.28-0.23c0.4-0.16,0.78-0.35,1.14-0.58h0.01L49.06,20h1.02v-4.19
c0-0.84-0.2-1.53-0.6-2.04c-0.4-0.5-1.04-0.77-1.93-0.77c-0.6,0-1.13,0.11-1.63,0.31c-0.5,0.21-0.9,0.41-1.23,0.61l0.5,0.86
c0.28-0.19,0.59-0.37,0.97-0.53c0.36-0.16,0.76-0.25,1.2-0.25c0.3,0,0.55,0.06,0.73,0.17c0.19,0.13,0.33,0.27,0.46,0.45
c0.11,0.19,0.18,0.41,0.23,0.65c0.05,0.25,0.08,0.48,0.08,0.73c-1.56,0.16-2.7,0.41-3.42,0.75c-0.72,0.36-1.06,0.87-1.06,1.53
C44.38,18.83,44.56,19.25,44.97,19.55z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M52.45,18c0.18,0.44,0.41,0.8,0.72,1.09
c0.3,0.3,0.66,0.52,1.08,0.68c0.42,0.15,0.88,0.23,1.36,0.23c0.44,0,0.86-0.08,1.27-0.25c0.4-0.16,0.76-0.39,1.1-0.67l-0.56-0.81
c-0.22,0.2-0.48,0.37-0.76,0.51c-0.28,0.16-0.6,0.22-0.94,0.22c-0.34,0-0.64-0.05-0.92-0.17c-0.28-0.13-0.53-0.3-0.72-0.52
c-0.19-0.22-0.35-0.47-0.45-0.78c-0.11-0.3-0.16-0.64-0.16-1.01c0-0.38,0.05-0.71,0.17-1.02c0.11-0.31,0.27-0.58,0.47-0.8
c0.19-0.22,0.44-0.39,0.72-0.51c0.28-0.13,0.58-0.19,0.92-0.19c0.28,0,0.55,0.06,0.78,0.19c0.24,0.12,0.47,0.26,0.69,0.45
l0.61-0.78c-0.25-0.22-0.55-0.42-0.89-0.59C56.59,13.09,56.17,13,55.7,13c-0.47,0-0.92,0.08-1.34,0.23
c-0.44,0.16-0.81,0.39-1.13,0.69c-0.31,0.31-0.57,0.67-0.76,1.11c-0.19,0.44-0.28,0.92-0.28,1.49C52.19,17.08,52.27,17.56,52.45,18
z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M59.94,17.75c0,0.34,0.03,0.64,0.11,0.92
c0.06,0.28,0.18,0.52,0.34,0.7c0.16,0.21,0.38,0.36,0.64,0.47c0.27,0.11,0.6,0.16,1,0.16c0.22,0,0.45-0.02,0.69-0.08l0.66-0.19
l-0.24-0.92c-0.12,0.06-0.26,0.11-0.42,0.14C62.56,18.98,62.44,19,62.31,19c-0.42,0-0.72-0.11-0.87-0.33
c-0.17-0.22-0.25-0.55-0.25-0.97V14h1.97v-1h-1.97v-2.03h-1.03L60,13l-1.14,0.08V14h1.08V17.75z"/>
</g>
</svg>
The website is made with wordpress, so the SVG's are getting implemented by wordpress.
I probably could fix that, by adjusting the view size of the SVG's, but i would have to do that with js and thats pretty dirty.
For me worked svg {overflow: visible;} . So far spotted this issue in Firefox only.
i added a label inside a path successfully but when i try to center this label by changing manually x and dy attributes. the label deforms in the center.
here is some picture and its corresponding code.
before changing the x attributes its value 135:
<svg width="1306" height="628">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path>
</g>
<text x="135" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>
after changing the x attributes new value is 145:
<svg width="1306" height="628">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>
There is nothing "deformed" here. That's the expected behaviour: you're using a textPath to position the text, and the path you're referencing changes orientation at the first L command.
You can clearly see that there is nothing wrong when we draw some (red) lines, showing this "bend":
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862"
y2="555.2472222223878" stroke="red" transform="translate(-500,-260)"
></line>
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516"
y2="527.049" stroke="red" transform="translate(-500,-260)"
></line>
</svg>
And you can see that even better if we create several texts, increasing the dy up to your value (105):
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="15"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="40"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="60"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="80"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862"
y2="555.2472222223878" stroke="red" transform="translate(-500,-260)"
></line>
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516"
y2="527.049" stroke="red" transform="translate(-500,-260)"
></line>
</svg>
Possible solution: alternatively, you can draw a curve. That way, the text will follow the path without breaks:
<svg width="400" height="300">
<g>
<path name="cf40" d="M590.3383838385344,295.20151514932513 C 756 327,756 327, 878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path>
</g>
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text>
</svg>
I am trying to use svg animation to get a dragonfly to flap its wings.
I am doing this by scaling the left and right wing on the x axis. the problem is when I scale it the wing moves. I want the left or right edge of the wing to stay in one spot when it scales.
here is the code for one wing
<g id="wing_left">
<g>
<path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
<path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
<path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
C5,118.4-7.2,100.6-1.2,97.7z"/>
<path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s;wlFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wlFlapUp" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wlFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
Here is the whole svg code or you can see it in codepen
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-14.4 7.7 550.5 426.8" enable-background="new -14.4 7.7 550.5 426.8" xml:space="preserve">
<g id="wing_left">
<g>
<path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
<path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
<path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
C5,118.4-7.2,100.6-1.2,97.7z"/>
<path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s;wlFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wlFlapUp" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wlFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
<g id="wing_right">
<g>
<path fill="#88C9CE" d="M275.9,134c66.4,4.7,131.2,17.1,194.6,41.4c7.5,2.9,59.3,22.3,45.9,36.1c-14.8,15.2-87.7,19.9-109,14.6
C370.6,216.9,251.2,132.2,275.9,134z"/>
<path fill="#92D9DE" d="M285,113c16.2,3.1,244.8-39.1,249.2-29.7c12.3,26.3-36.8,53-54.4,59.8c-87.6,34-185.4,11.7-202.8-5.2
C271.1,132.1,274.2,110.9,285,113z"/>
<path fill="#FFFFFF" d="M451.2,98.5c25.6-4.3,28.9-4.8,58.9-8.8c1.9-0.3,16.3-1.3,15.6,4.3c-0.2,1.4-6.5,17.8-6,13.2
c0.1-0.8,0.9-9.8-1.3-12.5C513.9,88.7,445.7,99.5,451.2,98.5z"/>
<path fill="#76B0B3" d="M291.3,155.4c21.9,16.6,99.9,5.4,99.9,5.4s-54.7-0.2-86.7-9.9c-13.4-4.1-22.5-9.1-24.1-10.3
c0,0-0.8,0.9-1.8,1.6c0,0,0.1,2.2,0.1,2.2S287.6,152.7,291.3,155.4z"/>
</g>
<animateTransform id="wrFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s; wrFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wrFlapDown" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wrFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
<g id="body" xmlns:inkpad="http://taptrix.com/inkpad/svg_extensions">
<g id="Layer_2" inkpad:layerName="body">
<path fill="#D9AC32" d="M253.8,83.2c-4.5-29.5-6.4-53.2-16-74.7c-0.8-1.9-4.3,1-3.4,1.6c0.4,0.2,12.6,13.5,17.3,73.2
C252.2,88.9,254.5,87.3,253.8,83.2z"/>
<path fill="#D9AC32" d="M272.2,82.6c5.2-29.3,7.8-53,17.9-74.3c0.9-1.9,4.3,1.1,3.3,1.7c-0.4,0.2-12.9,13.2-19.1,72.7
C273.7,88.2,271.5,86.6,272.2,82.6z"/>
<path fill="#FFE008" d="M249.8,128.8l28.2-0.4c0,0,10.4,208,2.7,260.4c-10.3,71.1-18.9,49.7-27.9,0.4
C243.4,337.1,249.8,128.8,249.8,128.8z"/>
<path fill="#FFE008" d="M242.5,130.2c-0.2-12,9-21.8,20.6-22c11.5-0.2,21.1,9.4,21.2,21.4c0.2,12-9.7,17-21.2,17.2
C251.5,146.9,242.7,142.2,242.5,130.2z"/>
<path fill="#FFE008" d="M236.8,110.7c-0.3-18.4,12-32.8,26.5-33c14.5-0.2,25.8,13.9,26.1,32.2c0.3,18.4-11.7,25.1-26.3,25.3
C248.6,135.4,237.1,129,236.8,110.7z"/>
</g>
<g id="Layer_3" inkpad:layerName="eyes">
<g>
<path fill="#F5F2E1" d="M227.8,95.9c-0.1-8.3,7.2-15.1,16.4-15.3c9.2-0.1,16.7,6.5,16.8,14.8c0.1,8.3-7.2,15.1-16.4,15.3
C235.4,110.9,227.9,104.2,227.8,95.9z"/>
<path d="M255.1,92c-0.6,1.6-7.3-5.5-19.7,3.7c-2.4,1.8-1.8-4.6-0.1-6C244.1,82.6,255.8,90.4,255.1,92z"/>
<path fill="#D8E6C3" d="M228,96.2c-0.1-5.4,2.1,9.9,15.5,11.1c8.1,0.7,14.5-2.9,14.2-2.5c-3.9,4.4-9,5.5-10.5,5.7
C236.8,111.8,228.2,106.5,228,96.2z"/>
</g>
<g>
<path fill="#F5F2E1" d="M295.8,94.9c-0.1-8.3-7.7-14.9-16.8-14.8c-9.2,0.1-16.5,7-16.4,15.3c0.1,8.3,7.7,14.9,16.8,14.8
C288.6,110.1,295.9,103.2,295.8,94.9z"/>
<path d="M268.3,91.8c0.7,1.6,7.1-5.7,19.8,3.1c2.5,1.7,1.7-4.7-0.1-6C279.1,82.1,267.6,90.3,268.3,91.8z"/>
<path fill="#D8E6C3" d="M295.5,95.2c-0.1-5.4-1.8,9.9-15.2,11.5c-8.1,1-14.6-2.5-14.3-2.1c4,4.3,9.2,5.2,10.7,5.4
C287.2,111,295.7,105.5,295.5,95.2z"/>
</g>
</g>
<path fill="#E5C907" d="M242.6,127.9c0-0.1,4.8,8.1,22.5,7.2c13.6-0.7,19-8.1,19-8.1c-0.4,4.9-11.3,11.2-18.3,11.6
C260.3,139,247.3,137.3,242.6,127.9z"/>
<path fill="#E5C907" d="M249.3,143.6c0,0,6,3.9,15,3.2c10.4-0.8,14.4-4.7,14.4-4.6c0.2,4.1,0.5,8.3,0.4,8.6
c-3.5,7.1-20.6,9.4-29.8,2C249,152.5,249.3,147.1,249.3,143.6z"/>
</g>
</svg>
The problem here is that the origin for all scale transforms is at (0,0) which is at the top left of the SVG. So your scale animations are centred on the left side of the SVG (x=0).
Basically you need to move the coordinate space for the wings, so that when the scale is applied, the wings are centred on x=0.
So the steps would be:
Use a translate transform to move your wings so they are centred at x=0
apply your scale animation in this coordinate space
surround that with a group with a transform that moves them back to their original position
For example:
<g id="wings" transform="translate(270,0)">
<g>
<g transform="translate(-270,0)">
<g "left wing">
<g "right wing">
</g>
<animateTransform .../>
</g>
</g>
Demo here
I apologize if this has been answered, but I can't find the correct way to get this working. I'm using Nokogiri to modify SVG diagrams that are generated through an application and I hit a bit of a snag. The code I'm working with looks something like this:
<svg>
<g id="1">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="2">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="3">
<text>lorem</text>
<text>ipsum</text>
</g>
<svg>
I'd like to have this appended to every document as it is analyzed by the script:
<svg>
<g id="scale" transform="scale(1.0)">
<g id="1">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="2">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="3">
<text>lorem</text>
<text>ipsum</text>
</g>
</g>
<svg>
I've tried using methods such as before and after but it won't work correctly in this situation. Ideally I'd just wrap the entirety of the nodeset with wrap, but I can't figure out how to get it to work across all sets rather than on every nodeset. Any guidance would be much appreciated.
Thanks!
Here's how I'd do it:
require 'nokogiri'
doc = Nokogiri::XML(<<EOT)
<svg>
<g id="1">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="2">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="3">
<text>lorem</text>
<text>ipsum</text>
</g>
</svg>
EOT
svg = doc.at('svg')
svg.children = '<g id="scale" transform="scale(1.0)">' + svg.children.to_xml + '</g>'
puts svg.to_xml
Running that outputs:
<svg>
<g id="scale" transform="scale(1.0)">
<g id="1">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="2">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="3">
<text>lorem</text>
<text>ipsum</text>
</g>
</g>
</svg>
Nokogiri nicely lets us define nodes as strings, and coerces them to XML::Node objects. Give it a string containing XML and it'll convert it into a NodeSet, so we can cleanly and clearly manipulate the XML DOM without having to write u-gly code.
doc = Nokogiri.XML( raw_svg )
wrapper_g = doc.create_element('g', 'id' => "scale", 'transform' => "scale(1.0)")
doc.xpath('/svg/g').each {|elem| wrapper_g << elem }
doc.root << wrapper_g
Optional - remove empty text nodes:
doc.xpath('//text()').each {|t| t.text =~ /\A\s*\z/ and t.remove }
The cheat sheet might help.
require 'nokogiri'
doc = Nokogiri::XML(%Q{
<svg>
<g id="1">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="2">
<text>lorem</text>
<text>ipsum</text>
</g>
<g id="3">
<text>lorem</text>
<text>ipsum</text>
</g>
</svg>
})
svg = doc.xpath('//svg')[0]
wrapper = doc.create_element('g', 'id' => 'scale', 'transform' => 'scale(1.0)')
wrapper.children = svg.children
svg.add_child wrapper
puts doc
Note that you missed the slash at the closing svg tag.
Hi I am new on this site so please forgive me if i am not clear about what i am trying to do
My Question is:-
I am using HTML5 and SVG to clip the image so that only the part of the image that is inside the clipping/polygon shape is displayed while any part outside the polygon shape is invisible/clipped
Also I wish to add stroke width and color to the polygon shape
The SVG code that i am using:-
<?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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath ID="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5;" xlink:href="img.jpg" />
</a>
</svg>
The above mentioned code works fine, it display's an image that has a polygon shape, only the image part falling inside the shape is displayed whereas any part falling outside the shape is hidden
But somehow I tried various things but still i am not able to display stroke/border.
My question is how to display the border/stroke on a polygon shape that is used to clip an image
Thanks in advance
At first, please write ID in small letters in order to make the clip path work: <clipPath id="SVGID_1_">
Second, just duplicate your path in order to use is as regular shape.
<?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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<g>
<g>
<clipPath id="SVGID_1_">
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</clipPath>
<path fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Alternatively, you can define you path as a shape and just refer to its name afterwards:
<?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="455px" height="435px" viewPort="0 0 455 435" enable-background="new 0 0 455 435" xml:space="preserve">
<defs>
<path id="myPath" fill="none" stroke="#140063" stroke-width="3" stroke-miterlimit="10" d="M58.381,13.64
c0,0-39.011-19.932-50.819-5.104c-11.81,14.831,0.924,33.405,7.394,56.408c6.466,22.996,12.383,53.957,12.194,64.569
c-0.183,10.619,2.373,88.462,5.252,93.771c2.882,5.303-4.146,83.151-6.172,99.068c-2.035,15.925-18.668,83.151-18.668,83.151
S-7.896,443.4,40.954,428.874c48.844-14.523,188.373-18.06,206.847-18.949c18.48-0.885,160.776,16.67,167.244,19.836
c6.471,3.164,44.354,12.017,36.966-18.065c-7.396-30.072-22.252-97.301-22.252-97.301s-4.192-98.188-3.446-107.035
c0.748-8.846,6.144-60.148,3.446-70.763c-2.698-10.614,16.704-95.534,19.478-103.495c2.774-7.96,6.825-35.329-33.088-26.511
c-39.905,8.819-131.384,17.665-146.172,17.665C255.194,24.252,86.272,23.356,58.381,13.64z"/>
</defs>
<g>
<g>
<clipPath id="SVGID_1_">
<use xlink:href="#myPath" x="0" y="0"/>
</clipPath>
<use xlink:href="#myPath" x="0" y="0"/>
</g>
</g>
<a xlink:href="#">
<image clip-path="url(#SVGID_1_)" height="500" width="667" style="border-color:black;border-width:5px;" xlink:href="img.jpg" />
</a>
</svg>
Check out this doc.
Here you are using an image from within the SVG but if suppose you are using clip path on the image in your html code, you won't be able to give it border this way.
To achieve that you can apply the clip-path to the container div of the image too and then give it a background and border of the same color.