I need to animate the alphabet along a path so that it arcs to fit the path as it animates in.
I have tried using the arc path with an animateMotion tag in the hopes that it bends the alphabet group into it, but instead it is following the path while keeping the group of alphabet letters in a straight line.
Is there any way I can achieve this effect?
https://codepen.io/Finches/pen/vYgMBwW
Edit to include mandatory cody snippet (easier to just get the full svg from the codepen):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1359px"
height="396px" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
You will need to animate each letter using the same animation and a delay declared with the begin attribute. In the next example I'm animating only the letters A B and C.
If you use the same path for your animation you can use a <mpath xlink:href="#path"></mpath> element to point the path you want to use and save the original path in the defs
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9626, 11.9626;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9189, 11.9189;
}
.st3 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 6.0125, 6.0125;
}
</style>
<defs>
<path id="path" d="M1214.7,330.9L1214.7,330.9C1214.7,148.2,1047.5,0,841.1,0L373.6,0C167.2,0,0,148.2,0,330.9v0" />
</defs>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1
c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6
c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
<g>
<g>
<path class="st0" d="M1230.6,395c0-2,0-4-0.1-6" />
<path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
<path class="st0" d="M128.5,389c0,2-0.1,4-0.1,6" />
</g>
</g>
<g>
<g>
<path class="st0" d="M16.5,395c0.1-2,0.2-4,0.3-6" />
<path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5
c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
c18.7,39.2,29.7,91.8,32.9,136.2" />
<path class="st0" d="M1342.2,389c0.1,2,0.2,4,0.3,6" />
</g>
</g>
<g>
<g>
<path class="st0" d="M1286.9,395L1286.9,395c0-1,0-2,0-3" />
<path class="st3" d="M1286.7,385.9C1281.3,207.3,1116.2,64,913.3,64H445.7C241.7,64,75.8,209,72.2,388.9" />
<path class="st0" d="M72.2,392c0,1,0,2,0,3v0" />
</g>
</g>
<!-- Alphabet -->
<g>
<g id="a" transform="translate(-35,-35)">
<animateMotion dur="10s" repeatCount="indefinite">
<mpath xlink:href="#path"></mpath>
</animateMotion>
<rect x="1" y="1" class="st0" width="69.2" height="69.2" />
<path d="M14.7,52.2L31.8,7.6h6.4l18.3,44.6h-6.7l-5.2-13.5H25.9L21,52.2H14.7z M27.6,33.9h15.1L38,21.5c-1.4-3.8-2.5-6.8-3.2-9.3
c-0.6,2.9-1.4,5.7-2.4,8.5L27.6,33.9z" />
</g>
<g id="b" transform="translate(-121,-35)">
<animateMotion dur="10s" repeatCount="indefinite" begin="1s">
<mpath xlink:href="#path"></mpath>
</animateMotion>
<rect x="85.9" y="1" class="st0" width="69.2" height="69.2" />
<path d="M104.2,52.3V7.7h16.7c3.4,0,6.1,0.5,8.2,1.4c2.1,0.9,3.7,2.3,4.8,4.2c1.2,1.9,1.8,3.8,1.8,5.9c0,1.9-0.5,3.7-1.6,5.4
s-2.6,3-4.7,4.1c2.7,0.8,4.8,2.1,6.2,4c1.4,1.9,2.2,4.2,2.2,6.8c0,2.1-0.4,4-1.3,5.8c-0.9,1.8-2,3.2-3.3,4.2
c-1.3,1-2.9,1.7-4.9,2.2c-2,0.5-4.4,0.7-7.2,0.7H104.2z M110.1,26.5h9.6c2.6,0,4.5-0.2,5.6-0.5c1.5-0.4,2.6-1.2,3.4-2.2
c0.8-1,1.1-2.3,1.1-3.9c0-1.5-0.4-2.8-1.1-3.9s-1.7-1.9-3-2.3S122.2,13,119,13h-8.9V26.5z M110.1,47.1h11.1c1.9,0,3.2-0.1,4-0.2
c1.4-0.2,2.5-0.6,3.4-1.2s1.7-1.4,2.3-2.5c0.6-1.1,0.9-2.3,0.9-3.8c0-1.7-0.4-3.1-1.3-4.3s-2-2.1-3.5-2.6s-3.7-0.7-6.5-0.7h-10.3
V47.1z" />
</g>
<g id="c" transform="translate(-209.4,-35)">
<animateMotion dur="10s" repeatCount="indefinite" begin="2s">
<mpath xlink:href="#path"></mpath>
</animateMotion>
<rect x="174.4" y="1.1" class="st0" width="69.2" height="69.2" />
<path d="M224.8,36.7l5.9,1.5c-1.2,4.8-3.5,8.5-6.7,11.1c-3.2,2.5-7.1,3.8-11.8,3.8c-4.8,0-8.7-1-11.7-2.9c-3-2-5.3-4.8-6.9-8.5
c-1.6-3.7-2.4-7.7-2.4-12c0-4.6,0.9-8.7,2.7-12.2c1.8-3.5,4.3-6.1,7.6-7.9S208.4,7,212.3,7c4.5,0,8.2,1.1,11.3,3.4
c3,2.3,5.2,5.5,6.4,9.6l-5.8,1.4c-1-3.2-2.5-5.6-4.5-7.1c-2-1.5-4.4-2.2-7.4-2.2c-3.4,0-6.3,0.8-8.6,2.5s-3.9,3.8-4.9,6.6
c-0.9,2.8-1.4,5.6-1.4,8.6c0,3.8,0.6,7.1,1.7,9.9c1.1,2.8,2.8,4.9,5.2,6.3c2.3,1.4,4.9,2.1,7.6,2.1c3.3,0,6.1-1,8.4-2.9
C222.4,43.3,224,40.4,224.8,36.7z" />
</g>
</g>
</svg>
For solution one can use SVG: textPath
This will significantly reduce the code, since there will be only one path and the same animation for the movement of letters along this path.
Each letter of the alphabet is wrapped in tags - <tspan dx="0" dy="30">A</tspan>
The spacing between letters can be adjusted with the dx parameter
or with letter-spacing = "0.18em"
I chose letter-spacing as Firefox and Chrome do different spacing adjustments with dx and dy.
Since initially all the letters of the alphabet do not fit on the
traffic route, it must be made longer:
Below is the complete code, the animation of the movement of the letters will start after the click:
.container {
width:100vw;
height:100vh;
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9626, 11.9626;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9189, 11.9189;
}
#st3 {
fill: none;
stroke: #565656;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 6.0125, 6.0125;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
<path id="st3" d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
<!-- Alphabet -->
<text font-size="100px" fill="#565656" letter-spacing="0.18em">
<textPath xlink:href="#st3" startOffset="100%" >
<tspan dx="0" dy="30"> A</tspan>
<tspan dx="0" dy="0"> B</tspan>
<tspan dx="0" dy="0"> C</tspan>
<tspan dx="0" dy="0"> D</tspan>
<tspan dx="0" dy="0"> E</tspan>
<tspan dx="0" dy="0"> F</tspan>
<tspan dx="0" dy="0"> G</tspan>
<tspan dx="0" dy="0"> H</tspan>
<tspan dx="0" dy="0"> I</tspan>
<tspan dx="0" dy="0"> J</tspan>
<tspan dx="0" dy="0"> K</tspan>
<tspan dx="0" dy="0"> L</tspan>
<tspan dx="0" dy="0"> M</tspan>
<tspan dx="0" dy="0"> N</tspan>
<tspan dx="0" dy="0"> O</tspan>
<tspan dx="0" dy="0"> P</tspan>
<tspan dx="0" dy="0"> Q</tspan>
<tspan dx="0" dy="0">R</tspan>
<tspan dx="0" dy="0"> S</tspan>
<tspan dx="0" dy="0"> T</tspan>
<tspan dx="0" dy="0"> U</tspan>
<tspan dx="0" dy="0"> V</tspan>
<tspan dx="0" dy="0"> W</tspan>
<tspan dx="0" dy="0"> X</tspan>
<tspan dx="0" dy="0"> Y</tspan>
<tspan dx="0" dy="0"> Z</tspan>
<animate attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
</text>
</textPath>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1 c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6 c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
<path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
<path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
c18.7,39.2,29.7,91.8,32.9,136.2" />
<rect x="0" y="398" width="1400" height="800" fill="white" />
</svg>
In the question, each letter is wrapped in a frame.
This can be solved by using Unicode characters, which will replace Latin letters with a frame around the letter. Ⓐ - Ⓐ
Since this is essentially a font, you can style it: setting the size, color, etc.
The rest is the same as in the first example. Only letters are replaced with unicode characters
.container {
width:100vw;
height:100vh;
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9626, 11.9626;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9189, 11.9189;
}
#st3 {
fill: none;
stroke: #565656;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 6.0125, 6.0125;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
<path id="st3" d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
<!-- Alphabet -->
<text font-size="100px" fill="#565656">
<textPath xlink:href="#st3" startOffset="100%" >
<tspan dx="0" dy="30"> Ⓐ</tspan>
<tspan dx="0" dy="0"> Ⓑ</tspan>
<tspan dx="0" dy="0"> Ⓒ</tspan>
<tspan dx="0" dy="0"> Ⓓ</tspan>
<tspan dx="0" dy="0"> Ⓔ</tspan>
<tspan dx="0" dy="0"> Ⓕ</tspan>
<tspan dx="0" dy="0"> Ⓖ</tspan>
<tspan dx="0" dy="0"> Ⓗ</tspan>
<tspan dx="0" dy="0"> Ⓘ</tspan>
<tspan dx="0" dy="0"> Ⓙ</tspan>
<tspan dx="0" dy="0"> Ⓚ</tspan>
<tspan dx="0" dy="0"> Ⓛ</tspan>
<tspan dx="0" dy="0"> Ⓜ</tspan>
<tspan dx="0" dy="0"> Ⓝ</tspan>
<tspan dx="0" dy="0"> Ⓞ</tspan>
<tspan dx="0" dy="0"> Ⓟ</tspan>
<tspan dx="0" dy="0"> Ⓠ</tspan>
<tspan dx="0" dy="0"> Ⓡ</tspan>
<tspan dx="0" dy="0"> Ⓢ</tspan>
<tspan dx="0" dy="0"> Ⓣ</tspan>
<tspan dx="0" dy="0"> Ⓤ</tspan>
<tspan dx="0" dy="0"> Ⓥ</tspan>
<tspan dx="0" dy="0"> Ⓦ</tspan>
<tspan dx="0" dy="0"> Ⓧ</tspan>
<tspan dx="0" dy="0"> Ⓨ</tspan>
<tspan dx="0" dy="0"> Ⓩ</tspan>
<animate attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
</text>
</textPath>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1 c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6 c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
<path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
<path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
c18.7,39.2,29.7,91.8,32.9,136.2" />
<rect x="0" y="398" width="1400" height="800" fill="white" />
</svg>
An example of styling individual letters
For the unicode character of the letter A in a circle - Ⓐ
<tspan dx="0" dy="30" style="fill:red; font-size:120px;"> Ⓐ</tspan>
.container {
width:100vw;
height:100vh;
}
.st0 {
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9626, 11.9626;
}
.st2 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 11.9189, 11.9189;
}
#st3 {
fill: none;
stroke: #565656;
stroke-width: 2;
stroke-miterlimit: 10;
stroke-dasharray: 6.0125, 6.0125;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">
<path id="st3" d="m73.1 2823.3 0-2367.5L72.2 388.9c0 0 6.7-64.1 17.1-94.2 10.2-29.6 24.9-58 43.6-83.1 19-25.4 42.8-47.4 68.1-66.5 25-18.8 52.8-33.9 81.4-46.5 29.6-13.1 79.6-27.3 92.5-29.8 8.5-1.7 568.1-7.2 597.3-1.8 30.1 5.5 64 14.6 94.4 26.7 25.5 10.2 50.3 22.8 73.1 38.2 25.4 17.2 49.5 36.9 69.8 59.8 21.2 23.9 40.8 50.3 53.2 79.7C1277.7 307.4 1286.7 385.9 1286.7 385.9" />
<!-- Alphabet -->
<text font-size="100px" fill="#565656">
<textPath xlink:href="#st3" startOffset="100%" >
<tspan dx="0" dy="30" style="fill:red; font-size:120px;"> Ⓐ</tspan>
<tspan dx="0" dy="0"> Ⓑ</tspan>
<tspan dx="0" dy="0"> Ⓒ</tspan>
<tspan dx="0" dy="0"> Ⓓ</tspan>
<tspan dx="0" dy="0"> Ⓔ</tspan>
<tspan dx="0" dy="0"> Ⓕ</tspan>
<tspan dx="0" dy="0"> Ⓖ</tspan>
<tspan dx="0" dy="0"> Ⓗ</tspan>
<tspan dx="0" dy="0"> Ⓘ</tspan>
<tspan dx="0" dy="0" style="fill:dodgerblue; font-size:120px;"> Ⓙ</tspan>
<tspan dx="0" dy="0"> Ⓚ</tspan>
<tspan dx="0" dy="0"> Ⓛ</tspan>
<tspan dx="0" dy="0"> Ⓜ</tspan>
<tspan dx="0" dy="0" style="fill:yellowgreen; font-size:120px;"> Ⓝ</tspan>
<tspan dx="0" dy="0"> Ⓞ</tspan>
<tspan dx="0" dy="0"> Ⓟ</tspan>
<tspan dx="0" dy="0"> Ⓠ</tspan>
<tspan dx="0" dy="0"> Ⓡ</tspan>
<tspan dx="0" dy="0"> Ⓢ</tspan>
<tspan dx="0" dy="0" style="fill:gold; font-size:120px;"> Ⓣ</tspan>
<tspan dx="0" dy="0"> Ⓤ</tspan>
<tspan dx="0" dy="0"> Ⓥ</tspan>
<tspan dx="0" dy="0"> Ⓦ</tspan>
<tspan dx="0" dy="0"> Ⓧ</tspan>
<tspan dx="0" dy="0"> Ⓨ</tspan>
<tspan dx="0" dy="0" style="fill:crimson; font-size:120px;"> Ⓩ</tspan>
<animate attributeName="startOffset" from="100%" to="-20%" begin="svg1.click" dur="20s" repeatCount="indefinite"/>
</text>
</textPath>
<path class="st0" d="M1215.7,395c0-147.7-135.7-267.9-302.4-267.9H445.7C279,127.1,143.3,247.2,143.3,395H1 c0-53.2,11.8-104.8,35-153.4c22.4-46.9,54.5-89,95.3-125.2S219.6,51.8,272.6,32C327.5,11.4,385.7,1,445.7,1h467.6 c60,0,118.3,10.4,173.1,31c53,19.8,100.5,48.2,141.3,84.4s72.9,78.3,95.3,125.2c23.2,48.6,35,100.2,35,153.4L1215.7,395z" />
<path class="st1" d="M1230,377c-10.2-156-152.9-263.4-316.7-263.4H445.7c-165.9,0-310.1,110.2-317,269.4" />
<path class="st2" d="M17.6,377.1c3.6-43,14.5-92.7,32.4-130.2c21.6-45.3,52.6-86,92-120.9c39.4-34.9,85.3-62.3,136.5-81.5c53-19.9,109.2-29.9,167.2-29.9h467.6c58,0,114.2,10.1,167.2,29.9c51.1,19.2,97.1,46.6,136.5,81.5c39.4,34.9,70.4,75.6,92,120.9
c18.7,39.2,29.7,91.8,32.9,136.2" />
<rect x="0" y="398" width="1400" height="800" fill="white" />
</svg>
Related
I would like to scale up on hover 3 svgs nested in an other svg. These 3 svgs are planets visible on the first graph at this address : http://68.183.74.150:3000/planet.
So, to sum up, the code looks like this :
<svg id="a">
<g>
...
</g>
<g>
<svg id="b"></svg>
</g>
</svg>
I tried the code below but it doesn't work as b is nested inside a. It works if I apply this code to the "a" svg.
svg#b:hover {
transform: scale(3);
}
svg#b {
transition: all 1s;
transform-origin: 50% 50%;
}
How would you solve this ?
Apparently chromium seems to have issues with scaling nested svg elements.
/* example layout */
.wrap {
display: inline-block;
width: 20em;
}
.svgParent {
width: 10em;
border: 2px solid #ccc;
}
.svgParent:hover {
border: 2px solid green;
}
/* set transformorigin */
.svgChild,
.childNodes {
transition: 0.3s;
transform-origin: center;
}
/* ensure scaled element don't get cropped when scaled */
.svgChild {
overflow: visible;
}
.hoverElement:hover {
transform: scale(1.3);
opacity: 0.5;
}
<div class="wrap">
<p>Scale nested svg on hover –<br />not working in chrome</p>
<svg class="svgParent" viewBox="0 0 100 100">
<svg class="svgChild hoverElement" x="20" y="20" width="48" height="48" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="12" fill="#ccc" />
</svg>
</svg>
</div>
<div class="wrap">
<p>Scale group in nested svg on hover</p>
<svg class="svgParent" viewBox="0 0 100 100">
<svg class="svgChild" x="20" y="20" width="48" height="48" viewBox="0 0 24 24">
<g class="childNodes hoverElement">
<circle cx="12" cy="12" r="12" fill="#ccc" />
</g>
</svg>
</svg>
</div>
For a consistent display in both firefox and chromium you could wrap your planets' child elements an additional group like so:
<svg x="129.2" y="62.1" width="26" height="26" viewBox="0 0 36 36">
<g class="planetwrap">
<circle fill="#88C9F9" cx="18" cy="18" r="18" />
<path fill="#5C913B" d="M25.716 1.756c-1.022.568-1.872 1.528-3.028 1.181-1.875-.562-4.375-1.812-6-.25s-2 3 0 2.938 3.375-2.438 4.375-1.438.749 1.813-1.625 2.125S14.5 7 13.125 7s-1.688.812-.75 1.688-.563.937-2.125 1.812.375 1.25 1.688 2 2.312-.188 2.875-1.438 2.981-2.75 3.99-2.562c1.01.188 1.01.688.822 1.562s.75.625.812-.375 1.188-1.75 2.062-1.812 1.625 1.188.625 1.812-2 1.125-.75 1.438 2.125 1.938.688 2.625-3.937 1.125-5.062.562-3.688-1.375-4.375-.938-1.062.89-1.875 1.195c-.812.305-4.125 1.805-4.188 3.743S7.438 22.438 8.75 22.5s4.5-.812 5.5-1.625 2.375-.625 2.812.312.125 1.5-.312 3 .286 2.25.987 3.562c.701 1.312 1.263 2.062 1.263 3s1 1.875 2.5.312 2.875-4.625 3.5-5.75 1.125-3.625 1.875-4.125 1.938-1.688 1.062-1.5-2.625-.062-3.062-1.312-2.312-3.625-1.438-3.875 1.875 1.39 2.25 2.164c.375.774.875 1.711 1.625 1.961s2.375-1.673 2.875-1.961c.5-.289.125-1.476-.875-1.351s-2.312 0-2.312-.624 1.25-1.438 2.25-1.25 1.75.5 2.375 1.25 1.875 2.125 2.375 3 .875 1 1.125-.562c.166-1.038.387-1.609.59-2.222-1.013-5.829-4.82-10.683-9.999-13.148z" />
</g>
</svg>
Example grouped
If you can't optimize and save your tweaked planet assets statically you could use some js to do the wrapping job.
let planets = document.querySelectorAll('.recharts-reference-dot svg');
// wrap planet svg elements
planets.forEach(function(planet, i){
planet.innerHTML = '<g class="planetwrap">'+ planet.innerHTML +'</g>';
})
.recharts-reference-dot svg{
overflow:visible;
}
.planetwrap{
transform-origin:center;
transition: 0.3s transform
}
.planetwrap:hover{
transform:scale(1.5)
}
<div class="recharts-wrapper" style="position: relative; cursor: default; width: 899px; height: 199.778px;"><svg id="masse_distance" class="recharts-surface" width="899" height="199.77777777777777" viewBox="0 0 899 199.77777777777777" version="1.1">
<defs>
<clipPath id="masse_distance-clip">
<rect x="70" y="20" height="139.77777777777777" width="809"></rect>
</clipPath>
</defs>
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="70" y1="159.77777777777777" x2="879" y2="159.77777777777777"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="231.8" y1="165.77777777777777" x2="231.8" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="231.8" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="231.8" dy="0.71em">0.01 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="308.99821901364135" y1="165.77777777777777" x2="308.99821901364135" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="308.99821901364135" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="308.99821901364135" dy="0.71em">0.03 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="393.6" y1="165.77777777777777" x2="393.6" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="393.6" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="393.6" dy="0.71em">0.1 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="555.4" y1="165.77777777777777" x2="555.4" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="555.4" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="555.4" dy="0.71em">1 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="717.2" y1="165.77777777777777" x2="717.2" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="717.2" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="717.2" dy="0.71em">10 Mjup</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="masse" type="number" orientation="bottom" width="809" height="30" x="70" y="159.77777777777777" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="879" y1="165.77777777777777" x2="879" y2="159.77777777777777"></line><text name="masse" type="number" orientation="bottom" width="809" height="30" x="873.265625" y="167.77777777777777" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="873.265625" dy="0.71em">100 Mjup</tspan>
</text>
</g>
</g>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
<line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="70" y1="20" x2="70" y2="159.77777777777777"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="64" y1="124.83333333333333" x2="70" y2="124.83333333333333"></line><text name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="62" y="124.83333333333333" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="62" dy="0.355em">1 jour</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="64" y1="89.88888888888887" x2="70" y2="89.88888888888887"></line><text name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="62" y="89.88888888888887" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="62" dy="0.355em">100 jour</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="10" y="20" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="64" y1="61.208688458136685" x2="70" y2="61.208688458136685"></line><text name="periode orbitale" type="number" orientation="left" width="60" height="139.77777777777777" x="62" y="61.208688458136685" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="62" dy="0.355em">4380 jour</tspan>
</text>
</g>
</g>
</g>
<g class="recharts-layer recharts-reference-dot">
<g>
<svg x="129.19821901364134" y="62.06438300713549" width="26" height="26" viewBox="0 0 36 36">
<circle fill="#88C9F9" cx="18" cy="18" r="18"></circle>
<path fill="#5C913B" d="M25.716 1.756c-1.022.568-1.872 1.528-3.028 1.181-1.875-.562-4.375-1.812-6-.25s-2 3 0 2.938 3.375-2.438 4.375-1.438.749 1.813-1.625 2.125S14.5 7 13.125 7s-1.688.812-.75 1.688-.563.937-2.125 1.812.375 1.25 1.688 2 2.312-.188 2.875-1.438 2.981-2.75 3.99-2.562c1.01.188 1.01.688.822 1.562s.75.625.812-.375 1.188-1.75 2.062-1.812 1.625 1.188.625 1.812-2 1.125-.75 1.438 2.125 1.938.688 2.625-3.937 1.125-5.062.562-3.688-1.375-4.375-.938-1.062.89-1.875 1.195c-.812.305-4.125 1.805-4.188 3.743S7.438 22.438 8.75 22.5s4.5-.812 5.5-1.625 2.375-.625 2.812.312.125 1.5-.312 3 .286 2.25.987 3.562c.701 1.312 1.263 2.062 1.263 3s1 1.875 2.5.312 2.875-4.625 3.5-5.75 1.125-3.625 1.875-4.125 1.938-1.688 1.062-1.5-2.625-.062-3.062-1.312-2.312-3.625-1.438-3.875 1.875 1.39 2.25 2.164c.375.774.875 1.711 1.625 1.961s2.375-1.673 2.875-1.961c.5-.289.125-1.476-.875-1.351s-2.312 0-2.312-.624 1.25-1.438 2.25-1.25 1.75.5 2.375 1.25 1.875 2.125 2.375 3 .875 1 1.125-.562c.166-1.038.387-1.609.59-2.222-1.013-5.829-4.82-10.683-9.999-13.148z"></path>
</svg>
</g><text x="167.19821901364134" y="70.06438300713549">Terre</text>
</g>
</svg></div>
There is a difference in how svg of the same code is displayed when checked in chrome and safari.
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" class="svg4"
style="border: 1px solid rgb(0, 0, 0); overflow: hidden; position: relative; float: left;">
<rect width="100" height="100" x="300" y="300" fill="red"
style="transform-origin:50px 50px;transform: rotate(-40deg);"></rect>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-10deg);"
>
<tspan dy="0">jon doe 10</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-20deg);"
>
<tspan dy="0">jon doe 20</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-30deg);"
>
<tspan dy="0">jon doe 30</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-40deg);"
>
<tspan dy="0">jon doe 40</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-10deg);"
>
<tspan dy="0">jon doe 10</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-20deg);"
>
<tspan dy="0">jon doe 20</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-30deg);"
>
<tspan dy="0">jon doe 30</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-40deg);"
>
<tspan dy="0">jon doe 40</tspan>
</text>
</svg>
When checked in chrome, the transform-orgin value is applied and rotated.
chrome
When checked in Safari, the transform-orgin value is not applied at all and is displayed the same.
safari
However, this phenomenon is only seen in the text of the svg element, and elements such as rect are normally displayed.
Is there any way to ensure that the transform-orgin is applied normally in Safari?
I've been mightily struggling with being able to properly size and scale an svg image in a web page and have it flow properly. I've decided to give up and convert it to a png.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1920" height="165px"
viewBox="0 0 1920 165"
>
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
#import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
</style>
<style>
:root {
--graphics: #670309;
--logo-text: #282B28;
--services: #fff;
--bottom-bar-font-size: 0.8em;
}
.house{
fill: none;
stroke: var(--graphics);
}
.bottom{
fill: var(--graphics);
stroke: none;
}
.logo{
fill: var(--logo-text);
stroke: none;
}
.features{
fill: #282B28;
stroke: none;
}
.services {
fill: var(--services);
stroke: none;
text-anchor: start;
alignment-baseline="middle"
font-weight="400"
font-family="Roboto Condensed"
letter-spacing="0.03em"
}
.service {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
.separator {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
</style>
</defs>
<g id="whole-logo" transform="translate(0,0)scale(1)">
<svg>
<!-- ROOF -->
<path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- CHIMNEY -->
<path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>
<!-- LEFT WALL -->
<path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- RIGHT WALL -->
<path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- DOOR -->
<rect x="60" y="95" height="45" width="25" class="features"/>
<!-- SINGLE WINDOW DEFINITION -->
<defs>
<rect id="window" x="0" y="0" width="10" height="10" class="features"/>
</defs>
<!-- WINDOWS -->
<g transform="translate(105,95)">
<use href="#window" transform="translate(0 0)"/>
<use href="#window" transform="translate(0 12)"/>
<use href="#window" transform="translate(12 0)"/>
<use href="#window" transform="translate(12 12)"/>
</g>
<!-- BOTTOM BAR AND TEXT -->
<g transform="translate(0,140)">
<svg width="100%" height="25px">
<rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
<text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
<tspan class="service">residential</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">commercial</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-purchase</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-sale</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">warranty</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">expert-witness</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">sewer</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">radon</tspan>
</text>
</svg>
</g>
<!-- HOUSE DETECTIVES LLC -->
<g id="biz-name" transform="translate(265,140)scale(0.8)">
<line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
<text dx="70px" dy="0"
text-anchor="start"
font-size="38px"
font-family="Roboto Slab"
font-weight="bold"
transform="rotate(-90)"
class="logo">the</text>
<text dx="0" dy="0"
text-anchor="start"
font-size="78px"
font-family="Roboto Slab"
font-weight="bold"
class="logo">
<tspan class="name" x="5" dx="0" dy="-73">House</tspan>
<tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
<tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
</text>
</g>
</svg>
</g>
</svg>
My svg renders just fine in a browser, and I've validated it with validator.nu. However, it does not open properly in any vector editor I've tried including Inkscape and others. For instance, Inkscape looks like:
It also does not convert properly with ImageMagick.
I get pretty close with drawsvg.org
What should I try next?
Percentage values are not valid in viewBox attributes. The purpose of the viewBox attribute is to tell the browser the dimensions of the bounding box around the content in the SVG.
In the case of your SVG a suitabel viewBox would be:
viewBox="0 0 620 165"
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="100%" height="165px"
viewBox="0 0 620 165"
>
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
#import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
</style>
<style>
:root {
--graphics: #670309;
--logo-text: #282B28;
--services: #fff;
--bottom-bar-font-size: 0.8em;
}
.house{
fill: none;
stroke: var(--graphics);
}
.bottom{
fill: var(--graphics);
stroke: none;
}
.logo{
fill: var(--logo-text);
stroke: none;
}
.features{
fill: #282B28;
stroke: none;
}
.services {
fill: var(--services);
stroke: none;
text-anchor: start;
alignment-baseline="middle"
font-weight="400"
font-family="Roboto Condensed"
letter-spacing="0.03em"
}
.service {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
.separator {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
</style>
</defs>
<g id="whole-logo" transform="translate(0,0)scale(1)">
<svg>
<!-- ROOF -->
<path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- CHIMNEY -->
<path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>
<!-- LEFT WALL -->
<path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- RIGHT WALL -->
<path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- DOOR -->
<rect x="60" y="95" height="45" width="25" class="features"/>
<!-- SINGLE WINDOW DEFINITION -->
<defs>
<rect id="window" x="0" y="0" width="10" height="10" class="features"/>
</defs>
<!-- WINDOWS -->
<g transform="translate(105,95)">
<use href="#window" transform="translate(0 0)"/>
<use href="#window" transform="translate(0 12)"/>
<use href="#window" transform="translate(12 0)"/>
<use href="#window" transform="translate(12 12)"/>
</g>
<!-- BOTTOM BAR AND TEXT -->
<g transform="translate(0,140)">
<svg width="100%" height="25px">
<rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
<text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
<tspan class="service">residential</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">commercial</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-purchase</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-sale</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">warranty</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">expert-witness</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">sewer</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">radon</tspan>
</text>
</svg>
</g>
<!-- HOUSE DETECTIVES LLC -->
<g id="biz-name" transform="translate(265,140)scale(0.8)">
<line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
<text dx="70px" dy="0"
text-anchor="start"
font-size="38px"
font-family="Roboto Slab"
font-weight="bold"
transform="rotate(-90)"
class="logo">the</text>
<text dx="0" dy="0"
text-anchor="start"
font-size="78px"
font-family="Roboto Slab"
font-weight="bold"
class="logo">
<tspan class="name" x="5" dx="0" dy="-73">House</tspan>
<tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
<tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
</text>
</g>
</svg>
</g>
</svg>
I was trying to convert an svg document to JPG using batik (I tried both 1.8 and 1.7 versions with the same reuslt). Unluckily some svg elements (clippath, fegaussianblur, fecomponenttransfer, femerge) cause the following (or similar, depending on the svg tag) trace:
org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
The current document is unable to create an element of the requested type (namespace: http://www.w3.org/2000/svg, name: clippath).
at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(Unknown Source)
at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(Unknown Source)
Can anyone point out any solution for this problem?
Thanks,
Laura
UPDATE: Here is my input file:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- $Id$ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400"
height="300"> <defs> <clippath id="shielddx"> <rect
rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="300"
stroke-width="0.000001"></rect> </clippath> <clippath id="shielddy"> <rect
fill="none" x="0" y="0" width="331" height="210"></rect> </clippath> <filter
id="a5a87bf2-0ea3-4664-8ceb-bd50b883a117" height="120%"> <fegaussianblur
in="SourceAlpha" stdDeviation="3"></fegaussianblur> <fecomponenttransfer>
<fefunca type="linear" slope="0.2"></fefunca></fecomponenttransfer> <femerge> <femergenode></femergenode>
<femergenode in="SourceGraphic"></femergenode></femerge> </filter></defs> <rect rx="0" ry="0"
fill="#2D2D2D" x="0" y="0" width="400" height="300"
stroke-width="0.000001"></rect> <rect rx="0" ry="0" fill="#2D2D2D"
x="59" y="40" width="331" height="210" stroke-width="0.000001"></rect>
<g zIndex="1"></g> <g zIndex="1"> <path fill="none"
d="M 59 198.5 L 390 198.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 145.5 L 390 145.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 93.5 L 390 93.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 40.5 L 390 40.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 250.5 L 390 250.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path></g> <g zIndex="2"> <path
fill="none" d="M 224.5 250 L 224.5 256" stroke="#7E7E7E"
stroke-width="1"></path> <path fill="none" d="M 306.5 250 L 306.5 256"
stroke="#7E7E7E" stroke-width="1"></path> <path fill="none"
d="M 389.5 250 L 389.5 256" stroke="#7E7E7E" stroke-width="1"></path> <path
fill="none" d="M 141.5 250 L 141.5 256" stroke="#7E7E7E"
stroke-width="1"></path> <path fill="none" d="M 59 250.5 L 390 250.5"
stroke="#7E7E7E" stroke-width="1" zIndex="7" visibility="visible"></path> </g>
<g zIndex="2"> <text x="23" y="145"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;color:#7E7E7E;font-weight:normal;fill:#7E7E7E;"
zIndex="7" transform="rotate(270 23 145)" text-anchor="middle"
visibility="visible"> <tspan x="23">Quarter Overview</tspan></text></g> <g
zIndex="3"> <g visibility="visible" zIndex="0.1"
transform="translate(59,40)" clip-path="url(#shielddy)"> <rect
fill="#1E97E3" x="18" y="110.25" width="47" height="31.55000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="101" y="36.75" width="47" height="57.75"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="183" y="68.25" width="47" height="84.05000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="266" y="94.5" width="47" height="78.80000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect></g> <g
visibility="visible" zIndex="0.1" transform="translate(59,40)"></g></g> <text
x="200" y="25"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:16px;color:#FFFFFF;top:10;fill:#FFFFFF;"
text-anchor="middle" zIndex="4"> <tspan x="200">Quarterly
Performance</tspan></text> <g zIndex="7" transform="translate(166,273)"> <g
zIndex="1" clip-path="url(#shielddx)"> <g> <g zIndex="1"
transform="translate(8,3)"> <path fill="#1E97E3"
d="M 1 6 L 11 6 11 16 1 16 Z" style="cursor:pointer;" stroke="#1E97E3"
stroke-width="0.000001"></path> <text x="17" y="15"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;cursor:pointer;color:#A5A5A5;fill:#A5A5A5;"
text-anchor="start" zIndex="2"> <tspan x="17">Series 1</tspan> </text>
</g> </g> </g> </g> <g zIndex="7"> <text x="100.375" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="100.375">Q1</tspan> </text>
<text x="183.125" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="183.125">Q2</tspan> </text>
<text x="265.875" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="265.875">Q3</tspan></text>
<text x="348.625" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="348.625">Q4</tspan> </text></g>
<g zIndex="7"> <text x="51" y="256.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">-10</tspan></text>
<text x="51" y="203.6"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">0</tspan></text>
<text x="51" y="151.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">10</tspan></text>
<text x="51" y="98.6"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">20</tspan></text>
<text x="51" y="46.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">30</tspan></text></g>
<text x="64" y="60"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="start" zIndex="8"> <tspan x="64">Demo</tspan></text> <text
x="385" y="60"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="end" zIndex="8"> <tspan x="385">Demo</tspan></text> <text
x="64" y="245"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="start" zIndex="8"> <tspan x="64">Demo</tspan></text> <text
x="385" y="245"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="end" zIndex="8"> <tspan x="385">Demo</tspan></text> <g
zIndex="9"> <g visibility="visible" zIndex="1"
transform="translate(59,40)" clip-path="url(#shielddy)"> <rect
fill="rgb(192,192,192)" x="18" y="110.25" width="47"
height="31.55000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> <rect
fill="rgb(192,192,192)" x="101" y="36.75" width="47" height="57.75"
isTracker="1463661560361" fill-opacity="0.0001" visibility="visible"
style=""></rect> <rect fill="rgb(192,192,192)" x="183" y="68.25"
width="47" height="84.05000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> <rect
fill="rgb(192,192,192)" x="266" y="94.5" width="47"
height="78.80000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> </g> </g> </svg>
SVG is a case sensitive language. clippath is invalid, the correct name is clipPath.
I have a svg file which I want to be converted into jpg/png. Probem is that conversion is fine if there is no background image. But when I try to put some background image its not being rendered in the converted image and showing plain background color.
content of svg:
<svg height="370" version="1.1" width="350" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
<defs>
<pattern id="38A07B9C-47E8-4E02-A005-E6E4443FE5D0" x="0" y="0" patternUnits="userSpaceOnUse" height="300" width="300" patternTransform="matrix(1,0,0,1,0,0) translate(0,20)">
<image x="0" y="0" href="/home/mahad/public_html/svg/user-backgrounds/4f41f6a2a75dc_back.png" width="300" height="300"/>
</pattern>
</defs>
<rect x="0" y="0" width="350" height="370" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" style=""/>
<rect x="0" y="20" width="350" height="350" r="0" rx="0" ry="0" fill="url(#38A07B9C-47E8-4E02-A005-E6E4443FE5D0)" stroke="none" style="fill: url("#38A07B9C-47E8-4E02-A005-E6E4443FE5D0") rgb(0, 0, 0); opacity: 0.38;" opacity="0.38"/>
<rect x="0" y="20" width="14" height="14" r="0" rx="0" ry="0" fill="#000000" stroke="none" style=""/>
<text style="text-anchor: middle; font: 12px "Arial"; opacity: 1;" x="100" y="100" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#ff0000" font-size="12px" opacity="1" transform="matrix(1,0,0,1,73,92)">
<tspan dy="4.5">helllloooo...</tspan>
</text>
</svg>
conversion command:
echo exec("/usr/bin/convert /home/public_html/qr.svg /home/public_html/qr.png");
please help
In my case, installing librsvg2-bin fixed the problem:
sudo apt-get install librsvg2-bin