Attempting to extract data embed in Raphael SVGs, and hacking my way through options to get to the data. Currently, I've found what appears to be the SVG file with the data (this based on using Firebug and watch the data-swaps as the timeline changes) -- and attempting to convert the SVG into a stand alone SVG to confirm that at least visually the file appear to be the graph I'm looking at.
Here's the Raphael SVGs (or at least an SVG I'm not able to dump into an SVG template file I'm using and load without error):
<svg height="67" version="1.1" width="840" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0px; top: 0px;">
<desc>Created with Raphaël 2.1.0</desc>
<defs>
<rect x="0" y="0" width="840" height="67" r="0" rx="0" ry="0" fill="#ebebeb" stroke="none" style="">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,1.5L67,1.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,3.5L67,3.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,7.5L67,7.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,15.5L67,15.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,32.5L67,32.5Z" stroke-width="1" opacity="1">
<path style="opacity: 1;" fill="#aaaaaa" stroke="none" d="M0,67L0,0L0,31L2.310344827586207,34L4.620689655172414,35L6.931034482758621,38L9.241379310344827,39L11.551724137931034,41L13.862068965517242,41L16.17241379310345,41L18.482758620689655,37L20.79310344827586,39L23.103448275862068,40L25.413793103448274,41L27.724137931034484,41L30.03448275862069,45L32.3448275862069,45L34.6551724137931,44L36.96551724137931,41L39.275862068965516,41L41.58620689655172,43L43.89655172413793,43L46.206896551724135,44L48.51724137931034,44L50.82758620689655,41L53.137931034482754,34L55.44...2068965517241,17L785.5172413793103,16L787.8275862068965,17L790.1379310344828,21L792.448275862069,22L794.7586206896551,23L797.0689655172414,21L799.3793103448276,20L801.6896551724137,17L804,12L806.3103448275862,15L808.6206896551724,16L810.9310344827586,17L813.2413793103448,15L815.551724137931,16L817.8620689655172,17L820.1724137931035,17L822.4827586206897,18L824.7931034482758,19L827.1034482758621,19L829.4137931034483,17L831.7241379310344,16L834.0344827586207,16L836.3448275862069,17L838.6551724137931,2L840,67" stroke-width="0" opacity="1" transform="matrix(1,0,0,1,-554.3785,0)">
<path style="opacity: 1;" fill="none" stroke="#666666" d="M0,31L2.310344827586207,34L4.620689655172414,35L6.931034482758621,38L9.241379310344827,39L11.551724137931034,41L13.862068965517242,41L16.17241379310345,41L18.482758620689655,37L20.79310344827586,39L23.103448275862068,40L25.413793103448274,41L27.724137931034484,41L30.03448275862069,45L32.3448275862069,45L34.6551724137931,44L36.96551724137931,41L39.275862068965516,41L41.58620689655172,43L43.89655172413793,43L46.206896551724135,44L48.51724137931034,44L50.82758620689655,41L53.137931034482754,34L55.44827586206...17L783.2068965517241,17L785.5172413793103,16L787.8275862068965,17L790.1379310344828,21L792.448275862069,22L794.7586206896551,23L797.0689655172414,21L799.3793103448276,20L801.6896551724137,17L804,12L806.3103448275862,15L808.6206896551724,16L810.9310344827586,17L813.2413793103448,15L815.551724137931,16L817.8620689655172,17L820.1724137931035,17L822.4827586206897,18L824.7931034482758,19L827.1034482758621,19L829.4137931034483,17L831.7241379310344,16L834.0344827586207,16L836.3448275862069,17L838.6551724137931,2" stroke-width="2" opacity="1" transform="matrix(1,0,0,1,-554.3785,0)">
</svg>
How do I edit the SVG above to load as a standalone SVG file in the most recent version of FireFox?
My Firefox shows two problems:
the ë inside the <desc> tag is not a valid character. Remove the character or the whole <desc>.
most of the used tags ( <defs>, <rect>, <path> ) are not closed. Just change the > at the end to />.
I doubt, however, that this SVG shows your desired result.
<svg height="67" version="1.1" width="840" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: 0px; top: 0px;">
<defs />
<rect x="0" y="0" width="840" height="67" r="0" rx="0" ry="0" fill="#ebebeb" stroke="none" style="" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,1.5L67,1.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,3.5L67,3.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,7.5L67,7.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,15.5L67,15.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="none" stroke="#ffffff" d="M0,32.5L67,32.5Z" stroke-width="1" opacity="1" />
<path style="opacity: 1;" fill="#aaaaaa" stroke="none" d="M0,67L0,0L0,31L2.310344827586207,34L4.620689655172414,35L6.931034482758621,38L9.241379310344827,39L11.551724137931034,41L13.862068965517242,41L16.17241379310345,41L18.482758620689655,37L20.79310344827586,39L23.103448275862068,40L25.413793103448274,41L27.724137931034484,41L30.03448275862069,45L32.3448275862069,45L34.6551724137931,44L36.96551724137931,41L39.275862068965516,41L41.58620689655172,43L43.89655172413793,43L46.206896551724135,44L48.51724137931034,44L50.82758620689655,41L53.137931034482754,34L55.44...2068965517241,17L785.5172413793103,16L787.8275862068965,17L790.1379310344828,21L792.448275862069,22L794.7586206896551,23L797.0689655172414,21L799.3793103448276,20L801.6896551724137,17L804,12L806.3103448275862,15L808.6206896551724,16L810.9310344827586,17L813.2413793103448,15L815.551724137931,16L817.8620689655172,17L820.1724137931035,17L822.4827586206897,18L824.7931034482758,19L827.1034482758621,19L829.4137931034483,17L831.7241379310344,16L834.0344827586207,16L836.3448275862069,17L838.6551724137931,2L840,67" stroke-width="0" opacity="1" transform="matrix(1,0,0,1,-554.3785,0)" />
<path style="opacity: 1;" fill="none" stroke="#666666" d="M0,31L2.310344827586207,34L4.620689655172414,35L6.931034482758621,38L9.241379310344827,39L11.551724137931034,41L13.862068965517242,41L16.17241379310345,41L18.482758620689655,37L20.79310344827586,39L23.103448275862068,40L25.413793103448274,41L27.724137931034484,41L30.03448275862069,45L32.3448275862069,45L34.6551724137931,44L36.96551724137931,41L39.275862068965516,41L41.58620689655172,43L43.89655172413793,43L46.206896551724135,44L48.51724137931034,44L50.82758620689655,41L53.137931034482754,34L55.44827586206...17L783.2068965517241,17L785.5172413793103,16L787.8275862068965,17L790.1379310344828,21L792.448275862069,22L794.7586206896551,23L797.0689655172414,21L799.3793103448276,20L801.6896551724137,17L804,12L806.3103448275862,15L808.6206896551724,16L810.9310344827586,17L813.2413793103448,15L815.551724137931,16L817.8620689655172,17L820.1724137931035,17L822.4827586206897,18L824.7931034482758,19L827.1034482758621,19L829.4137931034483,17L831.7241379310344,16L834.0344827586207,16L836.3448275862069,17L838.6551724137931,2" stroke-width="2" opacity="1" transform="matrix(1,0,0,1,-554.3785,0)" />
</svg>
Related
I'm learning how to use svg clippath. And I know how to use the static clippath.
<svg width="500" height="150">
<clipPath id="circle">
<circle cx=50 cy=50 r=50></circle>
</clipPath>
<circle cx=50 cy=50 r=50></circle>
<rect x="0" y="0" width="30" height="15"
style="stroke: #ff0000; fill: none;" clip-path='url(#circle)'>
</rect>
</svg>
there I can get a clip rect.
code Image
but when I try to add an animation, the rect could out of the clippath.
<svg width="500" height="150">
<clipPath id="circle">
<circle cx=50 cy=50 r=50></circle>
</clipPath>
<circle cx=50 cy=50 r=50></circle>
<rect x="0" y="0" width="30" height="15"
style="stroke: #ff0000; fill: none;" clip-path='url(#circle)'>
<animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="0s" dur="10s" repeatCount="indefinite"
rotate="auto"
></animateMotion>
</rect>
</svg>
The rect is out of clippath
what I need is when the rect is out of clippath, it could not be seen any more. The clippath is not allow to move.
So how to get the rectangle in motion to remain in the clippath？
You put the clipped rect in a group and you apply the animation to the group like so:
<svg viewBox="0 0 400 300">
<clipPath id="circle">
<circle cx=50 cy=50 r=50>
</circle>
</clipPath>
<g>
<circle cx=50 cy=50 r=50></circle>
<rect x="0" y="0" width="30" height="15"
style="stroke: #ff0000; fill: none;" clip-path='url(#circle)'>
</rect>
<animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="0s" dur="10s" repeatCount="indefinite"
rotate="auto"
></animateMotion>
</g>
</svg>
UPDATE
The OP is commenting that his question has now been revised.
My question is how to not show the rectangle when it moves outside the clippath?
In this case you put the animated rect in a group and you clip the group like so:
<svg viewBox="0 0 500 150">
<clipPath id="circle">
<circle cx=50 cy=50 r=50></circle>
</clipPath>
<g clip-path='url(#circle)'>
<circle cx=50 cy=50 r=50></circle>
<rect x="0" y="0" width="30" height="15"
style="stroke: #ff0000; fill: none;" >
<animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="0s" dur="10s" repeatCount="indefinite"
rotate="auto"
></animateMotion>
</rect>
</g>
</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>
source: https://codepen.io/joondoe/pen/yLBMXPX?editors=1100
I would know why my circle fails to appear entirely since there is space place for it to display fully.
#import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
font-family: 'PT Sans', sans-serif;
padding: 2rem;
}
<h2>Beginning SVG: Drawing paths and marker</h2>
<svg width="1000" height="1000" >
<defs>
<marker
id="circle1" markerWidth="385" markerHeight="359"
refX="15" refY="5"
orient="auto"
>
<circle cx="15" cy="5" r="13" fill="black"/>
<circle cx="15" cy="5" r="12" fill="lightgray"/>
<path d="M 4,3.5 L 6.5,5 L4,6.5 Z" fill="slategray"/>
</marker>
</defs>
<line
x1="100" y1="220" x2="250" y2="200"
stroke="black" stroke-width="5"
marker-end="url(#circle1)"
/>
</svg>
Markers have a rectangular clipping area at the bounds of their tile. That's 0,0 to 385, 359 in your case so you need to draw the marker within that rect.
A circle with a cy="5" and r="13" will render above the y axis and therefore outside the clipping rect.
We can simply translate the marker contents and then move the marker refY to compensate. I've set the markerWidth and markerHeight at more sensible values too as having them too large prevents the browser from optimising marker rendering.
#import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
font-family: 'PT Sans', sans-serif;
padding: 2rem;
}
<h2>Beginning SVG: Drawing paths and marker</h2>
<svg width="1000" height="1000" viewBox="0 0 2000 2000">
<defs>
<marker
id="circle1" markerWidth="40" markerHeight="40"
refX="15" refY="25"
orient="auto"
>
<g transform="translate(0,20)">
<circle cx="15" cy="5" r="13" fill="black"/>
<circle cx="15" cy="5" r="12" fill="lightgray"/>
<path d="M 4,3.5 L 6.5,5 L4,6.5 Z" fill="slategray"/>
</g>
</marker>
</defs>
<line
x1="100" y1="220" x2="250" y2="200"
stroke="black" stroke-width="5"
marker-end="url(#circle1)"
/>
</svg>
I am trying to make a plot with each data point labelled on the x-axis with a text string written vertically. It all seems to work as expected except that the labels appear to be shifted left by one unit. I thought it was a bug in my c++ generating code but finally made a test case. In the following, I wanted the red and blue lines to underline the text but they
seem to go through the text. The green lines, offset by one, appear where
I thought the others should be relative to the text. What do I need to do here? The center of rotation does appear as expected. Thanks. Right now I'm just kluging the code to fix the offset but would like to fix it lol.
<svg style="overflow: hidden; -moz-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="100" version="1.1" height="100"><desc> test foo</desc>
<rect fill-opacity="1" stroke-width="1" stroke-opacity="1" style="" stroke="#00808080" fill="#00808080" ry="0" rx="0" r="0" height="100" width="100" y="0" x="0"></rect> <g fill="none" stroke="red" stroke-width="1000" />
<path d="M0 0 L50 0 " stroke="black" stroke-width="1"/>
<text font-weight="normal" font-size="5" font-family="Verdana" fill="#00ffffff" y="10" x="10" style="dominant-baseline: alphabetic; text-anchor: start;">unidentified</text>
<text transform="rotate(90,10,10)" font-weight="normal" font-size="5" font-family="Verdana" fill="#00ffffff" y="10" x="10" style="dominant-baseline: alphabetic; text-anchor: start;">unidentified</text>
<text transform="rotate(45,10,10)" font-weight="normal" font-size="5" font-family="Verdana" fill="#00ffffff" y="10" x="10" style="dominant-baseline: alphabetic; text-anchor: start;">unidentified</text>
<path d="M0 10 L100 10 " stroke="red" stroke-width=".1"/>
<path d="M0 11 L100 11 " stroke="green" stroke-width=".1"/>
<path d="M10 0 L10 100 " stroke="blue" stroke-width=".1"/>
<path d="M9 0 L9 100 " stroke="green" stroke-width=".1"/>
</svg>
I want to color the background of svg text similar to background-color in css
I was only able to find documentation on fill, which colors the text itself
Is it even possible?
You could use a filter to generate the background.
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" result="bg" />
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>
No this is not possible, SVG elements do not have background-... presentation attributes.
To simulate this effect you could draw a rectangle behind the text attribute with fill="green" or something similar (filters). Using JavaScript you could do the following:
var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", SVGRect.x);
rect.setAttribute("y", SVGRect.y);
rect.setAttribute("width", SVGRect.width);
rect.setAttribute("height", SVGRect.height);
rect.setAttribute("fill", "yellow");
ctx.insertBefore(rect, textElm);
The solution I have used is:
<svg>
<line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
<text x="150" y="105" style="fill:black">Hello World!</text>
</svg>
A duplicate text item is being placed, with stroke and stroke-width attributes. The stroke should match the background colour, and the stroke-width should be just big enough to create a "splodge" on which to write the actual text.
A bit of a hack and there are potential issues, but works for me!
Instead of using a <text> tag, the <foreignObject> tag can be used, which allows for XHTML content with CSS.
No, you can not add background color to SVG elements. You can do it programmatically with d3.
var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
.attr("x", bbox.x - padding)
.attr("y", bbox.y - padding)
.attr("width", bbox.width + (padding*2))
.attr("height", bbox.height + (padding*2))
.style("fill", "red");
Answer by Robert Longson (#RobertLongson) with modifications:
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow"/>
<feComposite in="SourceGraphic" operator="xor"/>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
<text x="20" y="50" font-size="50">solid background</text>
</svg>
and we have no bluring and no heavy "getBBox" :)
Padding is provided by white spaces in text-element with filter.
It's worked for me
Going further with #dbarton_uk answer, to avoid duplicating text you can use paint-order=stroke style:
<svg>
<line x1="100" y1="100" x2="350" y2="100" style="stroke:grey; stroke-width: 100"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.5em; fill:black; paint-order:stroke; stroke-linejoin:round">Hello World!</text>
</svg>
Note the stroke-linejoin:round which is needed to avoid seeing spikes for the W sharp angle.
You can combine filter with the text.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="0" y="0" width="1" height="1" id="bg-text">
<feFlood flood-color="white"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<!-- something has already existed -->
<rect fill="red" x="150" y="20" width="100" height="50" />
<circle cx="50" cy="50" r="50" fill="blue"/>
<!-- Text render here -->
<text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
<text fill="black" x="20" y="50" font-size="30">text with color</text>
</svg>
</body>
</html>
this is my favorite hack (not sure it should work). It refer an element that is not yet displayed, and it works pretty well
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
<defs>
<filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
<feFlood flood-color="#00ffff"/>
</filter>
</defs>
<!--Draw the text-->
<use xlink:href="#mygroup" filter="url(#removebackground)" />
<g id="mygroup">
<text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>
<line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/>
<line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/>
</g>
</svg>
For those wondering how to apply padding to a text element when it has a background like in the Robert's answer, do the following:
<svg>
<defs>
<filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
<feFlood flood-color="#171717"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
</svg>
In the example above, filter's x and y positions can be used as transform: translate(-10%, -10%) would, and width and height values can be read as 120% and 120%. So we made background 20% bigger, and offsetted it -10%, so background is now 10% bigger on each side of the text.
The previous answers relied on doubling up text and lacked sufficient whitespace.
By using atop and I was able to get the results I wanted.
This example also includes arrows, a common use case for SVG text labels:
<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic" operator="atop"></feComposite>
</filter>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<g id="garment">
<path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
<path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
<use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
<use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
<path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
<use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
<path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
<path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
<line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
<use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
<g id="dimension-sleeve-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
</g>
<g id="dimension-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
</g>
<g id="dimension-sleeve-to-sleeve">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension"> 130 cm </text>
</g>
<g title="Back Width" id="dimension-back-width">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension"> 60 cm </text>
</g>
</g>
</svg>
An obvious workaround to the problem of the blur produced by the filter effect is to render the <text> two times: once for the background (with transparent characters) and once for the characters (without a background filter).
For me, this was the only way to make the text readable in Safari.
<svg width="100%" height="100%">
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" />
</filter>
<g transform="translate(20, 50)" font-size="50">
<text aria-hidden="true" fill="none" filter="url(#solid)">solid background</text>
<text fill="blue">solid background</text>
</g>
</svg>
The aria-hidden="true" attribute is there to prevent screen readers from speaking the text twice, if the user uses a screen reader.
You can add style to your text:
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px,
rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"
White, in this example.
Does not work in IE :)