formula svg file different with different browsers - svg
I have an svg file
It is derived from the word file mathtype.
I use it displayed on the browser. However
With Internet explorer it displays quite well with the original file
But with other browsers (chrome, firefox) it does not match the original. Error in large brackets. same as the image below
- with chrome browser
- with Internet explorer browser
and this is content file svg
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd" height="0.4722222222222222in" preserveAspectRatio="none" stroke-linecap="round" viewBox="0 0 11264 1088" width="4.888888888888889in">
<style type="text/css">
.brush0 { fill: rgb(255,255,255); }
.pen0 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.pen1 { stroke: rgb(0,0,0); stroke-width: 16; stroke-linejoin: round; }
.font0 { font-size: 413px; font-family: Symbol, serif; }
.pen2 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.brush1 { fill: rgb(0,0,0); }
.pen3 { stroke: none; }
.font1 { font-size: 202px; font-family: "Times New Roman", serif; }
.font2 { font-size: 346px; font-family: "Times New Roman", serif; }
.font3 { font-style: italic; font-size: 346px; font-family: "Times New Roman", serif; }
.font4 { font-size: 313px; font-family: Symbol, serif; }
.brush2 { fill: rgb(0,0,0); }
.font5 { font-weight: bold; font-size: 16px; font-family: System, sans-serif; }
</style>
<g>
<line class="pen1" fill="none" x1="714" x2="714" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1077" x2="1077" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1631" x2="1631" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="2036" x2="2036" y1="346" y2="806"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3054" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3604" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="2816" x2="2854" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="2854" x2="2947" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="2947" x2="3049" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="3049" x2="4582" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="2812,624 2865,578 2947,783 3042,183 4582,183 4582,202 3057,202 2957,840 2938,840 2844,612 2820,633"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="5730" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6280" xml:space="preserve" y="700">)</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6900" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="7468" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="5492" x2="5530" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="5530" x2="5623" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="5623" x2="5725" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="5725" x2="7772" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="5488,624 5541,578 5623,783 5718,183 7772,183 7772,202 5733,202 5633,840 5614,840 5520,612 5496,633"/>
<line class="pen2" fill="none" x1="8371" x2="8410" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="8410" x2="8503" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="8503" x2="8605" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="8605" x2="8978" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="8368,573 8421,544 8504,670 8598,294 8978,294 8978,313 8612,313 8513,710 8494,710 8400,569 8374,584"/>
<line class="pen2" fill="none" x1="9347" x2="9386" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="9386" x2="9479" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="9479" x2="9581" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="9581" x2="9954" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="9344,573 9397,544 9480,670 9574,294 9954,294 9954,313 9588,313 9489,710 9470,710 9376,569 9350,584"/>
<line class="pen2" fill="none" x1="10563" x2="10602" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="10602" x2="10695" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="10695" x2="10797" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="10797" x2="11170" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="10560,573 10613,544 10696,670 10790,294 11170,294 11170,313 10804,313 10705,710 10686,710 10592,569 10566,584"/>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4797" xml:lang="en" xml:space="preserve" y="245">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3739 6415 7603" xml:lang="en" xml:space="preserve" y="438">222</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="1120 2079" xml:lang="en" xml:space="preserve" y="440">22</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4413" xml:lang="en" xml:space="preserve" y="500">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="911 1853" xml:lang="en" xml:space="preserve" y="771">12</text>
<text class="font2" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3422 4224 6098 7268 8580 8772 9556 9748 10356 10772 10964" xml:lang="en" xml:space="preserve" y="672">13131010210</text>
<text class="font3" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="88 780 1697" xml:lang="en" xml:space="preserve" y="672">Azz</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="505">
<tspan font-family="serif">⎛⎞⎛⎞</tspan>
</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="400 1335 2318 3212 3954 5012 5888 6630 7058 8062 9056 10056" xml:space="preserve" y="672">=+=<tspan font-family="serif">−</tspan>++<tspan font-family="serif">−</tspan>+<tspan font-family="serif">−</tspan>=+=</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="730">
<tspan font-family="serif">⎜⎟⎜⎟</tspan>
</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="971">
<tspan font-family="serif">⎝⎠⎝⎠</tspan>
</text>
</g>
</svg>
Who has experience in this issue please help me!
Internet Explorer's rendering seems like the one that's wrong to me here. That's assuming the file has been accurately copied to this question.
So, actually, the file looks wrong, not Chrome or Firefox.
The problem:
The large brackets are positioned using the multi-coordinate version of the x attribute.
x="2606 4638 5282 7828"
What this means is that you should position the first character of the text (the top of the first opening bracket) at x=2606. The second (the top of the first closing bracket) at x=4638 etc.
However there is a problem. The <text> element specifies xml:space="preserve". That tells the browser to treat every character in the text as significant. Even white-space characters such as newlines. And that's exactly what the problem is. Those large bracket text elements look like the following:
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="505">
<tspan font-family="serif">⎛⎞⎛⎞</tspan>
</text>
There are newlines between the <text> and <tspan> tags, and also between the </tspan> and </text> tags. So there are actually six characters in the <text> element, not four.
<newline> ( ) ( ) <newline>
So the first newline is erroneously taking the first x=2606 coordinate.
There are three ways to fix this:
1. Remove the aforementioned newlines
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd" height="0.4722222222222222in" preserveAspectRatio="none" stroke-linecap="round" viewBox="0 0 11264 1088" width="4.888888888888889in">
<style type="text/css">
.brush0 { fill: rgb(255,255,255); }
.pen0 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.pen1 { stroke: rgb(0,0,0); stroke-width: 16; stroke-linejoin: round; }
.font0 { font-size: 413px; font-family: Symbol, serif; }
.pen2 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.brush1 { fill: rgb(0,0,0); }
.pen3 { stroke: none; }
.font1 { font-size: 202px; font-family: "Times New Roman", serif; }
.font2 { font-size: 346px; font-family: "Times New Roman", serif; }
.font3 { font-style: italic; font-size: 346px; font-family: "Times New Roman", serif; }
.font4 { font-size: 313px; font-family: Symbol, serif; }
.brush2 { fill: rgb(0,0,0); }
.font5 { font-weight: bold; font-size: 16px; font-family: System, sans-serif; }
</style>
<g>
<line class="pen1" fill="none" x1="714" x2="714" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1077" x2="1077" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1631" x2="1631" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="2036" x2="2036" y1="346" y2="806"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3054" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3604" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="2816" x2="2854" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="2854" x2="2947" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="2947" x2="3049" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="3049" x2="4582" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="2812,624 2865,578 2947,783 3042,183 4582,183 4582,202 3057,202 2957,840 2938,840 2844,612 2820,633"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="5730" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6280" xml:space="preserve" y="700">)</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6900" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="7468" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="5492" x2="5530" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="5530" x2="5623" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="5623" x2="5725" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="5725" x2="7772" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="5488,624 5541,578 5623,783 5718,183 7772,183 7772,202 5733,202 5633,840 5614,840 5520,612 5496,633"/>
<line class="pen2" fill="none" x1="8371" x2="8410" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="8410" x2="8503" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="8503" x2="8605" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="8605" x2="8978" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="8368,573 8421,544 8504,670 8598,294 8978,294 8978,313 8612,313 8513,710 8494,710 8400,569 8374,584"/>
<line class="pen2" fill="none" x1="9347" x2="9386" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="9386" x2="9479" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="9479" x2="9581" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="9581" x2="9954" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="9344,573 9397,544 9480,670 9574,294 9954,294 9954,313 9588,313 9489,710 9470,710 9376,569 9350,584"/>
<line class="pen2" fill="none" x1="10563" x2="10602" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="10602" x2="10695" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="10695" x2="10797" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="10797" x2="11170" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="10560,573 10613,544 10696,670 10790,294 11170,294 11170,313 10804,313 10705,710 10686,710 10592,569 10566,584"/>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4797" xml:lang="en" xml:space="preserve" y="245">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3739 6415 7603" xml:lang="en" xml:space="preserve" y="438">222</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="1120 2079" xml:lang="en" xml:space="preserve" y="440">22</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4413" xml:lang="en" xml:space="preserve" y="500">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="911 1853" xml:lang="en" xml:space="preserve" y="771">12</text>
<text class="font2" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3422 4224 6098 7268 8580 8772 9556 9748 10356 10772 10964" xml:lang="en" xml:space="preserve" y="672">13131010210</text>
<text class="font3" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="88 780 1697" xml:lang="en" xml:space="preserve" y="672">Azz</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="505"><tspan font-family="serif">⎛⎞⎛⎞</tspan></text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="400 1335 2318 3212 3954 5012 5888 6630 7058 8062 9056 10056" xml:space="preserve" y="672">=+=<tspan font-family="serif">−</tspan>++<tspan font-family="serif">−</tspan>+<tspan font-family="serif">−</tspan>=+=</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="730"><tspan font-family="serif">⎜⎟⎜⎟</tspan></text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" xml:space="preserve" y="971"><tspan font-family="serif">⎝⎠⎝⎠</tspan></text>
</g>
</svg>
2. Remove the xml:space="preserve" attributes
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd" height="0.4722222222222222in" preserveAspectRatio="none" stroke-linecap="round" viewBox="0 0 11264 1088" width="4.888888888888889in">
<style type="text/css">
.brush0 { fill: rgb(255,255,255); }
.pen0 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.pen1 { stroke: rgb(0,0,0); stroke-width: 16; stroke-linejoin: round; }
.font0 { font-size: 413px; font-family: Symbol, serif; }
.pen2 { stroke: rgb(0,0,0); stroke-width: 1; stroke-linejoin: round; }
.brush1 { fill: rgb(0,0,0); }
.pen3 { stroke: none; }
.font1 { font-size: 202px; font-family: "Times New Roman", serif; }
.font2 { font-size: 346px; font-family: "Times New Roman", serif; }
.font3 { font-style: italic; font-size: 346px; font-family: "Times New Roman", serif; }
.font4 { font-size: 313px; font-family: Symbol, serif; }
.brush2 { fill: rgb(0,0,0); }
.font5 { font-weight: bold; font-size: 16px; font-family: System, sans-serif; }
</style>
<g>
<line class="pen1" fill="none" x1="714" x2="714" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1077" x2="1077" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="1631" x2="1631" y1="346" y2="806"/>
<line class="pen1" fill="none" x1="2036" x2="2036" y1="346" y2="806"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3054" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3604" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="2816" x2="2854" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="2854" x2="2947" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="2947" x2="3049" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="3049" x2="4582" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="2812,624 2865,578 2947,783 3042,183 4582,183 4582,202 3057,202 2957,840 2938,840 2844,612 2820,633"/>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="5730" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6280" xml:space="preserve" y="700">)</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="6900" xml:space="preserve" y="700">(</text>
<text class="font0" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="7468" xml:space="preserve" y="700">)</text>
<line class="pen2" fill="none" x1="5492" x2="5530" y1="628" y2="595"/>
<line class="pen2" fill="none" x1="5530" x2="5623" y1="595" y2="840"/>
<line class="pen2" fill="none" x1="5623" x2="5725" y1="840" y2="192"/>
<line class="pen2" fill="none" x1="5725" x2="7772" y1="192" y2="192"/>
<polygon class="pen3 brush1" points="5488,624 5541,578 5623,783 5718,183 7772,183 7772,202 5733,202 5633,840 5614,840 5520,612 5496,633"/>
<line class="pen2" fill="none" x1="8371" x2="8410" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="8410" x2="8503" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="8503" x2="8605" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="8605" x2="8978" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="8368,573 8421,544 8504,670 8598,294 8978,294 8978,313 8612,313 8513,710 8494,710 8400,569 8374,584"/>
<line class="pen2" fill="none" x1="9347" x2="9386" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="9386" x2="9479" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="9479" x2="9581" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="9581" x2="9954" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="9344,573 9397,544 9480,670 9574,294 9954,294 9954,313 9588,313 9489,710 9470,710 9376,569 9350,584"/>
<line class="pen2" fill="none" x1="10563" x2="10602" y1="578" y2="556"/>
<line class="pen2" fill="none" x1="10602" x2="10695" y1="556" y2="710"/>
<line class="pen2" fill="none" x1="10695" x2="10797" y1="710" y2="303"/>
<line class="pen2" fill="none" x1="10797" x2="11170" y1="303" y2="303"/>
<polygon class="pen3 brush1" points="10560,573 10613,544 10696,670 10790,294 11170,294 11170,313 10804,313 10705,710 10686,710 10592,569 10566,584"/>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4797" xml:lang="en" xml:space="preserve" y="245">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3739 6415 7603" xml:lang="en" xml:space="preserve" y="438">222</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="1120 2079" xml:lang="en" xml:space="preserve" y="440">22</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="4413" xml:lang="en" xml:space="preserve" y="500">2</text>
<text class="font1" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="911 1853" xml:lang="en" xml:space="preserve" y="771">12</text>
<text class="font2" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="3422 4224 6098 7268 8580 8772 9556 9748 10356 10772 10964" xml:lang="en" xml:space="preserve" y="672">13131010210</text>
<text class="font3" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="88 780 1697" xml:lang="en" xml:space="preserve" y="672">Azz</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" y="505">
<tspan font-family="serif">⎛⎞⎛⎞</tspan>
</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="400 1335 2318 3212 3954 5012 5888 6630 7058 8062 9056 10056" xml:space="preserve" y="672">=+=<tspan font-family="serif">−</tspan>++<tspan font-family="serif">−</tspan>+<tspan font-family="serif">−</tspan>=+=</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" y="730">
<tspan font-family="serif">⎜⎟⎜⎟</tspan>
</text>
<text class="font4" fill="rgb(0,0,0)" stroke="none" style="dominant-baseline: alphabetic;" x="2606 4638 5282 7828" y="971">
<tspan font-family="serif">⎝⎠⎝⎠</tspan>
</text>
</g>
</svg>
3. Remove the <tspan> elements, which appear to be unnecessary
(I haven't bothered with an example for this, as the other two solutions are better).
Related
scale a svg element which is inside an other svg
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>
when using safari, svg text element transform-origin is different
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?
TranscoderException when converting svg to image using Batik
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.
svg code is not displaying at all when used inside an <img> tag
I have some SVG here which displays fine inside a div, but not inside an img with src="data:image/svg+xml;utf8, etc .....
I've swapped the svg for more simple ones and its fine, so I know it's something odd about my actual svg code.
<svg width="500" height="420">
<style id="mystyle" type="text/css">.node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: #000; stroke-width: 1px; } .erd-bc { fill: none; stroke: #aaa; stroke-width: 2px; } marker { fill: none; stroke: #000; stroke-width: 1px; } </style><g transform="translate(120,20)">
<defs>
<marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 5 L 0 5"/>
</marker>
</defs>
<path class="link" marker-end="" marker-start="url(#card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
<g opacity="1" class="node" transform="translate(200,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(60,350)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g><g opacity="1" class="node" transform="translate(60,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(130,130)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
</g><g opacity="1" class="node" transform="translate(130,20)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g>
</g>
You need to URI encode the file and you also need to give it proper namespaces since you're not embedding it in a html file any more. E.g.
<img src='data:image/svg+xml;charset=utf-8,<svg width="500" height="420" xmlns="http://www.w3.org/2000/svg">
<style id="mystyle" type="text/css">.node { cursor: pointer; } .node circle { fill: %23fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: %23000; stroke-width: 1px; } .erd-bc { fill: none; stroke: %23aaa; stroke-width: 2px; } marker { fill: none; stroke: %23000; stroke-width: 1px; } </style><g transform="translate(120,20)">
<defs>
<marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 5 L 0 5"/>
</marker>
</defs>
<path class="link" marker-end="" marker-start="url(%23card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
<g opacity="1" class="node" transform="translate(200,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(60,350)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g><g opacity="1" class="node" transform="translate(60,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(130,130)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
</g><g opacity="1" class="node" transform="translate(130,20)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g>
</g>
</svg>'></img>
Imagemagick svg conversion
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