Mouseover on SVG text in the way - svg
I’m trying to make an infographic that changes colour as you mouseover and click various sections. I have managed to do the mouseover colour change and click, however there is text over the block and when the mouse goes over that the SVG thinks that i’m Mousing a different layer. I’ve tried adding the :hover to the group but had no joy. Any thoughts would be welcome:
https://jsfiddle.net/dxv0paco/2/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 798">
<defs>
<style>.cls-25,.cls-31,.cls-32{font-family:MyriadPro-Regular, Myriad Pro;}.cls-25{font-size:24px;}.cls-25,.cls-30,.cls-31{fill:#fff;}.cls-31{font-size:14px;}.cls-32{letter-spacing:-0.03em;}.cls-48{fill:#d4145a;}.cls-49{letter-spacing:0em;}.cls-48:hover{fill: #fbb03b;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}g#two a{cursor: pointer;}
</style>
</defs>
<title>Artboard2</title>
<g id="two"><a href="#">
<path class="cls-48" d="M733.28,197q6.06,12.34-.55,25.78Q725.28,237.92,703,251.9a145.37,145.37,0,0,1-27.38,13.7,135.53,135.53,0,0,1-24,6.54q-10.92,1.78-26.33,3.1-11,.83-19.18,2t-16.5,3.15l18.68,29.82-32.27,20.21a188.93,188.93,0,0,1-10.65,160.66q7.26-5.6,17.68-4.67,15.64,1.39,39.69,16.8l17.74,11.36-13.26,20.69L609.4,523.89q-7.68-4.92-12.68-6.46t-7.25,2q-1.58,2.46.66,5.48a28.51,28.51,0,0,0,6.13,5.83q3.88,2.82,11.58,7.75l4.14,2.65q21.87,14,27.37,5.43a7.51,7.51,0,0,0,1.09-2.12l30.35,19.44q-3.46,5.4-1.16,10.7t11.18,11q14.38,9.21,17.55,4.27,1.95-3.06,0-5.58a31.44,31.44,0,0,0-5.75-5.34c-2.51-1.88-4.32-3.24-5.45-4.07L682,571.56l13.41-20.93,6,3.67q23.18,15,30,28.49a24.8,24.8,0,0,1,1.77,19.46A389.85,389.85,0,0,0,733.28,197Z"/>
<text class="cls-25" transform="translate(644 309.14)">Business
<tspan class="cls-49" x="0" y="28.8">Planning</tspan>
</text>
<text class="cls-31" transform="translate(604.83 358.31)">
<tspan class="cls-32">We Formulate a plan that</tspan>
<tspan x="0" y="16.8">achieves your goals then we</tspan>
<tspan x="0" y="33.6">manage and evolve that plan</tspan>
<tspan x="0" y="50.4">as your business develops. Not</tspan>
<tspan x="0" y="67.2">a document but a model in</tspan>
<tspan x="0" y="84">which you test scenarios and</tspan>
<tspan x="0" y="100.8">that evolves with you.</tspan>
</text>
<path class="cls-30" d="M686.15,528.26c1-2.4,2.38-4.36,5-5.13a6.33,6.33,0,0,1,4.55.34,1.46,1.46,0,0,0,1.85-.28,11.1,11.1,0,0,1,2.12-1.66c.92-.48,1.77-.53,2.4.32a2,2,0,0,1-.26,2.55,3,3,0,0,1-.69.58,2.87,2.87,0,0,0-1.42,3.65c.91,3.28-1.34,6.71-4.61,7.74a6.94,6.94,0,0,1-8.33-3.66c-.18-.39-.18-.89-.63-1.13Zm10,1.53a3.18,3.18,0,0,0-3.12-3.21,3.32,3.32,0,0,0-3.25,3.29,3.39,3.39,0,0,0,3.26,3.14A3.2,3.2,0,0,0,696.19,529.79Z"/>
<path class="cls-30" d="M754,509.56c-.42.27-.41.78-.6,1.17a6.17,6.17,0,0,1-5.58,3.69,5.87,5.87,0,0,1-5.89-3.37,1.79,1.79,0,0,0-2.07-1.18,4.35,4.35,0,0,1-1.35,0,1.69,1.69,0,0,1-1.48-2.07c.14-.92.56-1.36,1.71-1.32s2.58,0,3.36-1.67a4.92,4.92,0,0,1,4.51-2.87c1.78-.09,3.38-.18,4.78,1a8,8,0,0,1,2.61,3.94Zm-3.68-1.45a2.76,2.76,0,0,0-2.76-2.77A2.73,2.73,0,0,0,744.8,508c-.06,1.16,1.28,2.94,2.23,3A3.12,3.12,0,0,0,750.32,508.11Z"/>
<path class="cls-30" d="M719.84,522a13.2,13.2,0,0,1-9.28-3.67c-.78-.73-1.25-.71-1.93,0a13.68,13.68,0,0,1-1.82,1.57,1.67,1.67,0,0,1-2.53-.25,1.64,1.64,0,0,1,.21-2.54c2.58-1.56,2.87-3.38,2-6.24-1.29-4-.11-7.93,2.45-11.32.48-.64.53-1,0-1.63-1.79-2-3.55-4-5.25-6a1.4,1.4,0,0,0-1.79-.44,6.82,6.82,0,0,1-8.58-4.79A6.87,6.87,0,0,1,706.48,483a6.6,6.6,0,0,1-.39,4.84,1.25,1.25,0,0,0,.31,1.75c1.87,1.94,3.61,4,5.35,6,.38.44.59.7,1.2.34a14.29,14.29,0,0,1,6.35-1.68,13.09,13.09,0,0,1,8.11,1.91.84.84,0,0,0,1.17-.12c1.24-1.11,2.46-2.23,3.76-3.26.58-.46.38-.88.27-1.43a5.4,5.4,0,0,1,1.8-5.57,5.09,5.09,0,0,1,5.49-.95,5.5,5.5,0,0,1-3.37,10.47,1.86,1.86,0,0,0-2.1.52,31.71,31.71,0,0,1-2.85,2.47c-.74.55-.72,1-.24,1.68,3.33,4.78,3.49,9.78.82,14.88a12.13,12.13,0,0,1-5.26,5.23,1.61,1.61,0,0,0-1,2.32c.45,1.38.45,2.92,1,4.22s2.36,1,3.53,1.69A7.3,7.3,0,0,1,727.2,542a7.41,7.41,0,0,1-7.24-4.64,7.23,7.23,0,0,1,2.28-8.39,2,2,0,0,0,.84-2.6c-.24-.71-.33-1.47-.5-2.2C722.07,522,722.07,522,719.84,522Zm10.41-14A10.19,10.19,0,0,0,719.5,497.8,10.26,10.26,0,1,0,730.25,508Zm-3.53,30.3a3.6,3.6,0,0,0,3.75-3.49,3.72,3.72,0,0,0-3.63-3.79,3.63,3.63,0,0,0-3.64,3.6A3.54,3.54,0,0,0,726.72,538.27ZM703.05,484.9a3.07,3.07,0,0,0-3.13-3.13,3.12,3.12,0,0,0-3.22,3.2c0,1.42,1.71,3.4,2.88,3.4A3.7,3.7,0,0,0,703.05,484.9Zm36.78,5.32a2,2,0,0,0-1.84-2,1.86,1.86,0,0,0-1.81,2,1.66,1.66,0,0,0,1.87,1.72A1.72,1.72,0,0,0,739.83,490.22Z"/>
<path class="cls-48" d="M696.19,529.79a3.2,3.2,0,0,1-3.11,3.22,3.39,3.39,0,0,1-3.26-3.14,3.32,3.32,0,0,1,3.25-3.29A3.18,3.18,0,0,1,696.19,529.79Z"/>
<path class="cls-48" d="M750.32,508.11a3.12,3.12,0,0,1-3.29,2.81c-.95,0-2.29-1.81-2.23-3a2.73,2.73,0,0,1,2.76-2.61A2.76,2.76,0,0,1,750.32,508.11Z"/>
<path class="cls-48" d="M730.25,508A10.28,10.28,0,1,1,719.5,497.8,10.24,10.24,0,0,1,730.25,508Z"/>
<path class="cls-48" d="M726.72,538.27a3.54,3.54,0,0,1-3.52-3.68,3.63,3.63,0,0,1,3.64-3.6,3.72,3.72,0,0,1,3.63,3.79A3.6,3.6,0,0,1,726.72,538.27Z"/>
<path class="cls-48" d="M703.05,484.9a3.7,3.7,0,0,1-3.47,3.47c-1.17,0-2.85-2-2.88-3.4a3.12,3.12,0,0,1,3.22-3.2A3.07,3.07,0,0,1,703.05,484.9Z"/>
<path class="cls-48" d="M739.83,490.22a1.72,1.72,0,0,1-1.78,1.66,1.66,1.66,0,0,1-1.87-1.72,1.86,1.86,0,0,1,1.81-2A2,2,0,0,1,739.83,490.22Z"/></a>
</g>
</svg>
Just make the text pointer-events: none if you want it to be ignored when moused over.
text {
pointer-events: none;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 798">
<defs>
<style>.cls-25,.cls-31,.cls-32{font-family:MyriadPro-Regular, Myriad Pro;}.cls-25{font-size:24px;}.cls-25,.cls-30,.cls-31{fill:#fff;}.cls-31{font-size:14px;}.cls-32{letter-spacing:-0.03em;}.cls-48{fill:#d4145a;}.cls-49{letter-spacing:0em;}.cls-48:hover{fill: #fbb03b;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}g#two a{cursor: pointer;}
</style>
</defs>
<title>Artboard2</title>
<g id="two"><a href="#">
<path class="cls-48" d="M733.28,197q6.06,12.34-.55,25.78Q725.28,237.92,703,251.9a145.37,145.37,0,0,1-27.38,13.7,135.53,135.53,0,0,1-24,6.54q-10.92,1.78-26.33,3.1-11,.83-19.18,2t-16.5,3.15l18.68,29.82-32.27,20.21a188.93,188.93,0,0,1-10.65,160.66q7.26-5.6,17.68-4.67,15.64,1.39,39.69,16.8l17.74,11.36-13.26,20.69L609.4,523.89q-7.68-4.92-12.68-6.46t-7.25,2q-1.58,2.46.66,5.48a28.51,28.51,0,0,0,6.13,5.83q3.88,2.82,11.58,7.75l4.14,2.65q21.87,14,27.37,5.43a7.51,7.51,0,0,0,1.09-2.12l30.35,19.44q-3.46,5.4-1.16,10.7t11.18,11q14.38,9.21,17.55,4.27,1.95-3.06,0-5.58a31.44,31.44,0,0,0-5.75-5.34c-2.51-1.88-4.32-3.24-5.45-4.07L682,571.56l13.41-20.93,6,3.67q23.18,15,30,28.49a24.8,24.8,0,0,1,1.77,19.46A389.85,389.85,0,0,0,733.28,197Z"/>
<text class="cls-25" transform="translate(644 309.14)">Business
<tspan class="cls-49" x="0" y="28.8">Planning</tspan>
</text>
<text class="cls-31" transform="translate(604.83 358.31)">
<tspan class="cls-32">We Formulate a plan that</tspan>
<tspan x="0" y="16.8">achieves your goals then we</tspan>
<tspan x="0" y="33.6">manage and evolve that plan</tspan>
<tspan x="0" y="50.4">as your business develops. Not</tspan>
<tspan x="0" y="67.2">a document but a model in</tspan>
<tspan x="0" y="84">which you test scenarios and</tspan>
<tspan x="0" y="100.8">that evolves with you.</tspan>
</text>
<path class="cls-30" d="M686.15,528.26c1-2.4,2.38-4.36,5-5.13a6.33,6.33,0,0,1,4.55.34,1.46,1.46,0,0,0,1.85-.28,11.1,11.1,0,0,1,2.12-1.66c.92-.48,1.77-.53,2.4.32a2,2,0,0,1-.26,2.55,3,3,0,0,1-.69.58,2.87,2.87,0,0,0-1.42,3.65c.91,3.28-1.34,6.71-4.61,7.74a6.94,6.94,0,0,1-8.33-3.66c-.18-.39-.18-.89-.63-1.13Zm10,1.53a3.18,3.18,0,0,0-3.12-3.21,3.32,3.32,0,0,0-3.25,3.29,3.39,3.39,0,0,0,3.26,3.14A3.2,3.2,0,0,0,696.19,529.79Z"/>
<path class="cls-30" d="M754,509.56c-.42.27-.41.78-.6,1.17a6.17,6.17,0,0,1-5.58,3.69,5.87,5.87,0,0,1-5.89-3.37,1.79,1.79,0,0,0-2.07-1.18,4.35,4.35,0,0,1-1.35,0,1.69,1.69,0,0,1-1.48-2.07c.14-.92.56-1.36,1.71-1.32s2.58,0,3.36-1.67a4.92,4.92,0,0,1,4.51-2.87c1.78-.09,3.38-.18,4.78,1a8,8,0,0,1,2.61,3.94Zm-3.68-1.45a2.76,2.76,0,0,0-2.76-2.77A2.73,2.73,0,0,0,744.8,508c-.06,1.16,1.28,2.94,2.23,3A3.12,3.12,0,0,0,750.32,508.11Z"/>
<path class="cls-30" d="M719.84,522a13.2,13.2,0,0,1-9.28-3.67c-.78-.73-1.25-.71-1.93,0a13.68,13.68,0,0,1-1.82,1.57,1.67,1.67,0,0,1-2.53-.25,1.64,1.64,0,0,1,.21-2.54c2.58-1.56,2.87-3.38,2-6.24-1.29-4-.11-7.93,2.45-11.32.48-.64.53-1,0-1.63-1.79-2-3.55-4-5.25-6a1.4,1.4,0,0,0-1.79-.44,6.82,6.82,0,0,1-8.58-4.79A6.87,6.87,0,0,1,706.48,483a6.6,6.6,0,0,1-.39,4.84,1.25,1.25,0,0,0,.31,1.75c1.87,1.94,3.61,4,5.35,6,.38.44.59.7,1.2.34a14.29,14.29,0,0,1,6.35-1.68,13.09,13.09,0,0,1,8.11,1.91.84.84,0,0,0,1.17-.12c1.24-1.11,2.46-2.23,3.76-3.26.58-.46.38-.88.27-1.43a5.4,5.4,0,0,1,1.8-5.57,5.09,5.09,0,0,1,5.49-.95,5.5,5.5,0,0,1-3.37,10.47,1.86,1.86,0,0,0-2.1.52,31.71,31.71,0,0,1-2.85,2.47c-.74.55-.72,1-.24,1.68,3.33,4.78,3.49,9.78.82,14.88a12.13,12.13,0,0,1-5.26,5.23,1.61,1.61,0,0,0-1,2.32c.45,1.38.45,2.92,1,4.22s2.36,1,3.53,1.69A7.3,7.3,0,0,1,727.2,542a7.41,7.41,0,0,1-7.24-4.64,7.23,7.23,0,0,1,2.28-8.39,2,2,0,0,0,.84-2.6c-.24-.71-.33-1.47-.5-2.2C722.07,522,722.07,522,719.84,522Zm10.41-14A10.19,10.19,0,0,0,719.5,497.8,10.26,10.26,0,1,0,730.25,508Zm-3.53,30.3a3.6,3.6,0,0,0,3.75-3.49,3.72,3.72,0,0,0-3.63-3.79,3.63,3.63,0,0,0-3.64,3.6A3.54,3.54,0,0,0,726.72,538.27ZM703.05,484.9a3.07,3.07,0,0,0-3.13-3.13,3.12,3.12,0,0,0-3.22,3.2c0,1.42,1.71,3.4,2.88,3.4A3.7,3.7,0,0,0,703.05,484.9Zm36.78,5.32a2,2,0,0,0-1.84-2,1.86,1.86,0,0,0-1.81,2,1.66,1.66,0,0,0,1.87,1.72A1.72,1.72,0,0,0,739.83,490.22Z"/>
<path class="cls-48" d="M696.19,529.79a3.2,3.2,0,0,1-3.11,3.22,3.39,3.39,0,0,1-3.26-3.14,3.32,3.32,0,0,1,3.25-3.29A3.18,3.18,0,0,1,696.19,529.79Z"/>
<path class="cls-48" d="M750.32,508.11a3.12,3.12,0,0,1-3.29,2.81c-.95,0-2.29-1.81-2.23-3a2.73,2.73,0,0,1,2.76-2.61A2.76,2.76,0,0,1,750.32,508.11Z"/>
<path class="cls-48" d="M730.25,508A10.28,10.28,0,1,1,719.5,497.8,10.24,10.24,0,0,1,730.25,508Z"/>
<path class="cls-48" d="M726.72,538.27a3.54,3.54,0,0,1-3.52-3.68,3.63,3.63,0,0,1,3.64-3.6,3.72,3.72,0,0,1,3.63,3.79A3.6,3.6,0,0,1,726.72,538.27Z"/>
<path class="cls-48" d="M703.05,484.9a3.7,3.7,0,0,1-3.47,3.47c-1.17,0-2.85-2-2.88-3.4a3.12,3.12,0,0,1,3.22-3.2A3.07,3.07,0,0,1,703.05,484.9Z"/>
<path class="cls-48" d="M739.83,490.22a1.72,1.72,0,0,1-1.78,1.66,1.66,1.66,0,0,1-1.87-1.72,1.86,1.86,0,0,1,1.81-2A2,2,0,0,1,739.83,490.22Z"/></a>
</g>
</svg>
Related
Center Text on Rectangle in SVG
I am trying to center some text ("Go") onto a blue rectangle in an SVG image, however the text is only appearing at the top left corner.
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="#8080ff" height="400" width="400" y="0" x="0"/>
<text font-weight="bold" stroke="black" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" stroke-width="0" fill="#000000">Go</text>
</g>
</svg>
I think you are missing x="50%" y="50%" then it will work. <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="#8080ff" height="400" width="400" y="0" x="0"/> <text font-weight="bold" stroke="black" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" stroke-width="0" fill="#000000">Go</text> </g> </svg>
Alter coordinates system by flipping X axis (start at top right corner)
I'm looking for a simple way to make the coordinate system in a given svg element start from the top right corner, instead of the top left. This means the X axis is flipped, thus increasing the x attribute of an element renders it further to the left, and increasing the y attribute renders it further to the bottom as usual. I've played around with scale and viewBox, however: scale almost solves the problem, but it doesn't really work for my use case because it also flips the text I've got rendered viewBox doesn't seem work with height="100%" and width="100%". For my use case I don't think I can hard code the height and width of the SVG because I need it to be usable across many different resolutions and screen sizes. This question says it solves the same problem for the Y axis with a matrix transformation. I looked around and tried to calculate the equivalent for the X axis, but with no success. Here is an example of what I'm trying to achieve: <svg style="border: 1px black solid;" height="100%" width="100%"> <g> <g> <rect fill="#F0BC40" width="70" height="12" x="0" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="35" y="29">7</text> </g> <g> <rect fill="orange" width="50" height="12" x="72" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="97" y="29">5</text> </g> <g> <rect fill="orange" width="40" height="12" x="124" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="144" y="29">4</text> </g> <g> <rect fill="red" width="50" height="12" x="166" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="191" y="29">5</text> </g> <rect fill="#52575E" width="2" height="16" x="70" y="28"></rect> <rect fill="#52575E" width="2" height="16" x="122" y="28"></rect> <rect fill="#52575E" width="2" height="16" x="164" y="28"></rect> </g> </svg> As you can see I'd like this stacked bar to be rendered from the right, with the red bar being the furthest to the left (so essentially the stacked bar would be flipped) Also I'm doing this in Elm, so I can't access the DOM to check widths, heights or coordinates of elements (I'm calculating everything in a functional way). If anyone could help me achieve this I'd be greatly thankful.
The way I would think about this is drawing your bars from x="0" to the left, and then setting the viewBox with a negative x value and a width that lets it end at x="0". For the text elements, add a negative sign to the x value. For the rects, set the x value as x -> -x - width. Define a viewBox such that the lowest x value is still inside, or whatever is appropriate. <svg style="border: 1px black solid;" height="100%" width="100%" viewBox="-500 0 500 100"> <g> <g> <rect fill="#F0BC40" width="70" height="12" x="-70" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="-35" y="29">7</text> </g> <g> <rect fill="orange" width="50" height="12" x="-122" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="-97" y="29">5</text> </g> <g> <rect fill="orange" width="40" height="12" x="-164" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="-144" y="29">4</text> </g> <g> <rect fill="red" width="50" height="12" x="-216" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="-191" y="29">5</text> </g> <rect fill="#52575E" width="2" height="16" x="-72" y="28"></rect> <rect fill="#52575E" width="2" height="16" x="-124" y="28"></rect> <rect fill="#52575E" width="2" height="16" x="-166" y="28"></rect> </g> </svg> This will scale the text and the bars; if you need to avoid that, there is a trick. You can surround the content with two <svg> elements and use the inner one to move everything 100% to the right. overflow="visible" (or style="overflow:visible") makes sure the content is visible although it is formally outside the viewport of the inner <svg>. <svg style="border: 1px black solid;" height="100%" width="100%"> <svg x="100%" overflow="visible"> <g> <g> <rect fill="#F0BC40" width="70" height="12" x="-70" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="-35" y="29">7</text> </g> <g> <rect fill="orange" width="50" height="12" x="-122" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="-97" y="29">5</text> </g> <g> <rect fill="orange" width="40" height="12" x="-164" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="-144" y="29">4</text> </g> <g> <rect fill="red" width="50" height="12" x="-216" y="30"></rect> <text fill="black" font-size="10px" text-anchor="middle" x="-191" y="29">5</text> </g> <rect fill="#52575E" width="2" height="16" x="-72" y="28"></rect> <rect fill="#52575E" width="2" height="16" x="-124" y="28"></rect> <rect fill="#52575E" width="2" height="16" x="-166" y="28"></rect> </g> </svg> </svg>
As you said, scale "almost works". You can use scale again to unflip the text. Use nested transforms to get the flipping style working correctly with horizontal text placement. If you want to switch back to the unflipped version just change the -1 in the scale to a 1 (or get rid of the transform in the flipping style).
<head>
<style TYPE="text/css">
<!--
.flipped {
transform: scale(-1,1);
}
-->
</style>
</head>
<svg class=flipped style="border: 1px black solid;" height="100%" width="100%">
<g>
<g>
<rect fill="#F0BC40" width="70" height="12" x="0" y="30"></rect>
<g transform="translate(35,29)">
<g class=flipped >
<text fill="black" font-size="10px" text-anchor="middle" >7</text>
</g>
</g>
</g>
<g>
<rect fill="orange" width="50" height="12" x="72" y="30"></rect>
<g transform="translate(97,29)">
<g class=flipped >
<text fill="black" font-size="10px" text-anchor="middle" >5</text>
</g>
</g>
</g>
<g>
<rect fill="orange" width="40" height="12" x="124" y="30"></rect>
<g transform="translate(144,29)">
<g class=flipped >
<text fill="black" font-size="10px" text-anchor="middle" >4</text>
</g>
</g>
</g>
<g>
<rect fill="red" width="50" height="12" x="166" y="30"></rect>
<g transform="translate(191,29)">
<g class=flipped >
<text fill="black" font-size="10px" text-anchor="middle" >5</text>
</g>
</g>
</g>
<rect fill="#52575E" width="2" height="16" x="70" y="28"></rect>
<rect fill="#52575E" width="2" height="16" x="122" y="28"></rect>
<rect fill="#52575E" width="2" height="16" x="164" y="28"></rect>
</g>
</svg>
SVG image preview issue
I have an editor in my ionic 1 app, using which SVG images are getting created. Below is the SVG image: But when I am displaying same image in my app. <ion-view> <ion-content> <img src= "img.svg"> </ion-content> </ion-view> It is looking like: The text got shifted to left. What can be the issue? EDIT : SVG Image: <svg width="226.77168" height="226.77168" xmlns="http://www.w3.org/2000/svg"> <g> <title>background</title> <rect fill="#ffff00" id="canvas_background" height="228.77168" width="228.77168" y="-1" x="-1"/> </g> <g id="maingroup"> <title>Layer 1</title> <text height="61.921875" width="110.890625" data-size="5" class="text_data" autocomplete="false" editable-text="true" text-anchor="start" font-family="Arial" font-size="18.8976377952755" id="svg_1" y="99.93397766491398" x="57.941792488098145" stroke-width="0" stroke="#000" fill="#000000"> <tspan dx="0" stroke-width="0" class="helpTspan"/> <tspan dx="4.22119140625" data-text="The label is" class="inner-text" stroke-width="0">The label is <tspan visibility="hidden"></tspan></tspan> <tspan dy="1.05em" dx="-106.66162109375" data-text="or for testing" class="inner-text" stroke-width="0">or for testing <tspan visibility="hidden"></tspan></tspan> <tspan dy="1.05em" dx="-107.1904296875" data-text="test the text" class="inner-text" stroke-width="0">test the text <tspan visibility="hidden"></tspan></tspan> </text> <path stroke="null" height="137.00021362304688" width="122.99990844726562" class="shape" data-type="shape" data-name="Square" data-id="11" id="svg_4" d="M52.386104583740234,44.885799407958984L52.386104583740234,181.88600158691406L175.38600158691406,181.88600158691406L175.38600158691406,44.885799407958984L52.386104583740234,44.885799407958984L52.386104583740234,44.885799407958984zM170.26231384277344,176.1790008544922L57.50979232788086,176.1790008544922L57.50979232788086,50.59700012207031L170.26231384277344,50.59700012207031L170.26231384277344,176.1790008544922L170.26231384277344,176.1790008544922z" fill-opacity="null" stroke-opacity="null" stroke-width="null" fill="#000000"/> </g> </svg>
I believe the problem is that you are positioning each line of text relative to the end of the previous line of text. It would only take minor differences in the font rendering engines of the mobile browsers to end up with the line of text being a pixel or two shorter or longer. That would mean that the start of the next line would end up in a slight different place. If this is the problem, then you should be able to avoid it by setting a specific start x for each line of text, rather than using dx. Try this version of the file and see if it is any better. <svg width="226.77168" height="226.77168" xmlns="http://www.w3.org/2000/svg"> <g> <title>background</title> <rect fill="#ffff00" id="canvas_background" height="228.77168" width="228.77168" y="-1" x="-1"/> </g> <g id="maingroup"> <title>Layer 1</title> <text height="61.921875" width="110.890625" data-size="5" class="text_data" autocomplete="false" editable-text="true" text-anchor="start" font-family="Arial" font-size="18.8976377952755" id="svg_1" y="99.93397766491398" x="57.941792488098145" stroke-width="0" stroke="#000" fill="#000000"> <tspan dx="4.22119140625" data-text="The label is" class="inner-text" stroke-width="0">The label is</tspan> <tspan dy="1.05em" x="57.344" data-text="or for testing" class="inner-text" stroke-width="0">or for testing</tspan> <tspan dy="1.05em" x="61" data-text="test the text" class="inner-text" stroke-width="0">test the text</tspan> </text> <path stroke="null" height="137.00021362304688" width="122.99990844726562" class="shape" data-type="shape" data-name="Square" data-id="11" id="svg_4" d="M52.386104583740234,44.885799407958984L52.386104583740234,181.88600158691406L175.38600158691406,181.88600158691406L175.38600158691406,44.885799407958984L52.386104583740234,44.885799407958984L52.386104583740234,44.885799407958984zM170.26231384277344,176.1790008544922L57.50979232788086,176.1790008544922L57.50979232788086,50.59700012207031L170.26231384277344,50.59700012207031L170.26231384277344,176.1790008544922L170.26231384277344,176.1790008544922z" fill-opacity="null" stroke-opacity="null" stroke-width="null" fill="#000000"/> </g> </svg>
SVG text shifted on Edge and IE
I have isolated a case where SVG text is shifted only on Microsoft browsers (EDGE & IE) <svg width="360" height="186" viewBox="0 0 120 64" preserveAspectRatio="none"> <text font-size="72" font-family="Arial" fill="#ff2204" x="0" y="62" text-anchor="middle"> <tspan x="50%" dy="0">test</tspan> </text> </svg> Is there a way to make the text centered as in other browsers? Here's the sample code in jsfiddle
Removing the whitespace between </tspan> and </text> resolves the issue <svg width="360" height="186" viewBox="0 0 120 64" preserveAspectRatio="none"> <text font-size="72" font-family="Arial" fill="#ff2204" x="0" y="62" text-anchor="middle"> <tspan x="50%" dy="0">test</tspan></text> </svg> jsfiddle
SVG Text and Rect position
I have this code: <g pointer-events="default"> <g> <g x="0" y="0" width="145" height="47" regroup="false"> <text x="0" y="0"> <tspan x="0" y="0">some text</tspan> </text> </g> <g x="0" y="0" width="80" height="60" regroup="false"> <rect x="0" y="0" width="80" height="60" fill="white" /> </g> </g> </g> There is one css rule box-sizing: border-box;which is apply to all elements. It produce that: The grid is coming from a sliding element from the first <g>. I don't understand why the text element and the rect are not displayed at the same y. Does anyone have any idea?