Add shadow on a svg <path> - css
I'm trying to put a modern shadow on a particular part of a svg.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
<g style="isolation:isolate">
<g>
<g>
<path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<path d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
I tried using the filter but the edge are visible and it's too blury:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
<g style="isolation:isolate">
<g>
<g>
<filter id="dropshadow" x="-2" y="-2" width="200" height="200">
<feGaussianBlur stdDeviation="1"/>
</filter>
<path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<path style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2; filter: url('#dropshadow');" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
I'm expecting to use some modern css shadow like (https://codepen.io/sdthornton/pen/wBZdXq) and don't crop the original svg. I also expect to use less shadow on the top of it
I believe this is what you want, you can just change the values in the filter to fit your needs.
in plain simple words, not to completact thing:
feOffset: x, y to move the blur shadow effect back and forth.
filter: height to move it up and down
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 169 67.25">
<g style="isolation:isolate">
<g>
<g>
<defs>
<filter id="dropshadow" height="122%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feOffset in="blur" dx="0.7" dy="0.7" result="offsetBlur"/>
<feOffset dx="1" dy="1" result="offsetblur" />
<feFlood flood-color="#3D4574" flood-opacity="0.3" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
</filter>
</defs>
<use xlink:href="#path1" filter="url(#dropshadow)"></use>
<path id="path1" d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<use xlink:href="#path2" filter="url(#dropshadow)"></use>
<path id="path2" style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2;" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
Instead of using custom svg filter you can achieve easily the expected result using the standard CSS drop-shadow filter
ie: filter: drop-shadow(0 0 2px rgba(0,0,0,.5));
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
<g style="isolation:isolate">
<path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<path style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2; filter: drop-shadow(0 0 2px rgba(0,0,0,.5));" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</svg>
Related
background color not appying on Text tag inside svg [duplicate]
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 :)
animation property on svg element doesn't work on edge 15
please see below the svg.
the animation css property works on chrome 58.
the same animation property doesn't work on edge 15.15.
what is the correct way to animate an svg element using edge?
this is the style tag i have inserted on the svg.
<style>
.car-container {
transform-origin: 606px 600px;
animation: rotate-right 6s linear 0s infinite;
}
#keyframes rotate-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
please see the whole svg attached in the snippet.
<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<symbol id="background" viewBox="0 0 1200 1200">
<style type="text/css">
.bg0{fill:#63C6BD;}
.bg1{fill:#EDF7F7;}
.bg2{fill:none;stroke:#36BDB1;stroke-width:5;stroke-miterlimit:10;stroke-dasharray:192.3119,96.156;}
</style>
<g>
<g>
<path class="bg0" d="M252.5,614.6H176v43h76.5V614.6z M246.7,620.4v6.9h-64.9v-6.9H246.7z M181.8,651.9v-18.7h64.9v18.7H181.8z"/>
<path class="bg0" d="M474.5,599.1V545H143v54.1h7.1v247.2H143v27.6h331.5v-27.6h-7.1V599.1H474.5z M468.7,852.1v16H148.8v-16
h102.7v0.2h114.6v-0.2H468.7z M251.5,776.4v70h-95.6V599.1h305.8v247.2h-95.6v-70H251.5z M360.3,782.2v64.2h-103v-64.2H360.3z
M148.8,593.3v-42.5h319.9v42.5H148.8z"/>
<path class="bg0" d="M447,614.6h-76.5v43H447V614.6z M441.2,651.9h-64.9v-18.7h64.9V651.9z M441.2,627.3h-64.9v-6.9h64.9V627.3z"
/>
<path class="bg0" d="M349.8,614.6h-76.5v43h76.5V614.6z M344,651.9H279v-18.7H344V651.9z M344,627.3H279v-6.9H344V627.3z"/>
<path class="bg0" d="M268.6,808.9H349v-22.1h-80.4V808.9z M274.4,792.6h68.8v10.5h-68.8V792.6z"/>
<path class="bg0" d="M268.6,842.3H349V812h-80.4V842.3z M274.4,817.8h68.8v18.7h-68.8V817.8z"/>
<path class="bg0" d="M447,667.9h-76.5v43H447V667.9z M441.2,705.2h-64.9v-19.4h64.9V705.2z M441.2,679.9h-64.9v-6.2h64.9V679.9z"
/>
<path class="bg0" d="M349.8,667.9h-76.5v43h76.5V667.9z M344,705.2H279v-19.4H344V705.2z M344,679.9H279v-6.2H344V679.9z"/>
<path class="bg0" d="M252.5,667.9H176v43h76.5V667.9z M246.7,705.2h-64.9v-19.4h64.9V705.2z M246.7,679.9h-64.9v-6.2h64.9V679.9z"
/>
<path class="bg0" d="M447,721.3h-76.5v43H447V721.3z M441.2,758.5h-64.9v-19.3h64.9V758.5z M441.2,733.4h-64.9v-6.3h64.9V733.4z"
/>
<path class="bg0" d="M349.8,721.3h-76.5v43h76.5V721.3z M344,758.5H279v-19.3H344V758.5z M344,733.4H279v-6.3H344V733.4z"/>
<path class="bg0" d="M252.5,721.3H176v43h76.5V721.3z M246.7,758.5h-64.9v-19.3h64.9V758.5z M246.7,733.4h-64.9v-6.3h64.9V733.4z"
/>
</g>
</g>
<path class="bg0" d="M955,670.9c-3.5,0-7,0.4-10.4,1.2c-4.1-14.9-13.2-24.7-28.2-27.8c-1.5-7.1-4.2-14-8.2-20.2
c7.7-8.5,12-19.4,12-31.1c0-24.9-19.7-45.2-44.2-46c-4.6-11.8-26.5-16.1-46.4-16.1c-31.9,0-64.2,9.8-64.2,28.5c0,0.5,0,1.1,0,1.6
c-13.7,7-22.4,21.2-22.4,36.8c0,4.7,0.8,9.3,2.3,13.7c-21.2,9-35,27.6-35.4,48.3c-0.6,30.4,27.3,55.7,62.3,56.4
c7.2,0.1,20.7,0.2,41.5,0.2v152c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-152c6.5,0,12.8,0,18.4,0c2.3,20.7,20.7,36.8,43,36.8
h35v48.6c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-48.6H955c23.8,0,43.2-18.5,43.2-41.2C998.3,689.4,978.9,670.9,955,670.9z
M816.7,710.7L816.7,710.7L816.7,710.7c-0.6,0-1.1,0-1.7,0c-21.4,0-35.4-0.1-42.6-0.2c-31.8-0.7-57.2-23.3-56.6-50.5
c0.4-19.1,13.9-36.4,34.4-44l2.9-1.1l-1.2-2.8c-2-4.5-3-9.3-3-14.2c0-13.9,8.2-26.6,20.8-32.3l1.9-0.8l-0.2-2c-0.1-1-0.1-2-0.1-3.1
c0-14,30.3-22.7,58.4-22.7c22.9,0,39.9,5.6,41.3,13.7l0.5,2.5l3-0.1c22,0,39.9,18,39.9,40.2c0,10.9-4.2,21.1-11.9,28.7l-1.7,1.7
l1.4,2c6.4,9.1,9.7,19.7,9.7,30.8c0,30-24.8,54.4-55.3,54.4c-3.1,0-7.7,0-13.2,0C835.7,710.7,826.3,710.7,816.7,710.7z M955,747.5
h-74c-19.1,0-34.8-13.6-37.1-31c5.3,0,9.7,0,12.7,0c33.7,0,61.1-27,61.1-60.2c0-2-0.1-3.9-0.3-5.8c12.5,3.4,19.7,12.4,22.3,25.8
l0.6,3.2l3.1-1c3.8-1.2,7.7-1.8,11.7-1.8c20.6,0,37.4,15.9,37.4,35.4C992.5,731.6,975.7,747.5,955,747.5z"/>
<path class="bg0" d="M1052.2,836.4c-2-9.2-10.5-15.9-20.4-15.9c-2.9,0-5.6,0.6-8.1,1.6c-3.4-6.7-8.9-12.2-15.7-15.9
c-3.1-17.3-18.8-30.1-37.4-30.1c-17.2,0-32.1,11-36.6,26.5c-2.9-0.7-5.8-1-8.8-1c-20.9,0-37.9,16.2-37.9,36.2
c0,19.9,17,36.2,37.9,36.2h64.3c4,0,7.9-0.6,11.6-1.7c2.3,0.8,4.8,1.3,7.4,1.3h33c11.5,0,20.9-9,20.9-20
C1062.4,846.4,1058.5,840,1052.2,836.4z M989.5,868.2h-64.3c-17.7,0-32.1-13.6-32.1-30.4c0-16.7,14.4-30.4,32.1-30.4
c3.4,0,6.8,0.5,10,1.5l3.1,1l0.6-3.2c2.8-14.4,16.1-24.9,31.6-24.9c16.2,0,29.9,11.4,31.9,26.6l0.2,1.6l1.4,0.7
c6.4,3.1,11.5,8.1,14.6,14.2c-3,2.3-5.3,5.4-6.6,8.9c-1.2-0.2-2.4-0.3-3.6-0.3c-11.5,0-20.9,9-20.9,20c0,5.6,2.4,10.7,6.3,14.3
C992.5,868,991,868.2,989.5,868.2z M1041.5,867.7h-33c-8.3,0-15.1-6.4-15.1-14.2c0-7.8,6.8-14.2,15.1-14.2c1.6,0,3.2,0.2,4.7,0.7
l3.1,1l0.6-3.2c1.3-6.7,7.5-11.6,14.8-11.6c7.6,0,14,5.3,15,12.4l0.2,1.6l1.4,0.7c5.1,2.4,8.2,7.3,8.2,12.6
C1056.6,861.4,1049.8,867.7,1041.5,867.7z"/>
<path class="bg0" d="M770.9,814.3h-43.5v-6.7h19.5v-22.8H728c0.2-0.4,0.2-0.7,0.2-1.2v-6h18.7v-22H595.5v22h17.6v6
c0,0.4,0.1,0.8,0.2,1.2h-17.8v22.8h16.8v6.7h-39.2v30.3h12.8v23.9c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-23.9h160.6v23.9
c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-23.9h12.8V814.3z M721.6,807.5v6.7H618.1v-6.7H721.6z M601.3,761.3h139.8v10.4H601.3
V761.3z M618.9,783.6v-6h103.5v6c0,0.4,0.1,0.8,0.2,1.2h-104C618.8,784.4,618.9,784,618.9,783.6z M601.3,790.5h139.8v11.2H601.3
V790.5z M765.1,838.8H578.9v-18.7h186.2V838.8z"/>
<path class="bg0" d="M548.1,803.4h-3.9l4.9-28.4h-46.9l4.9,28.4h-4.1c-1.6,0-2.9,1.3-2.9,2.9v61.4c0,1.6,1.3,2.9,2.9,2.9
c1.6,0,2.9-1.3,2.9-2.9v-18.2h39.4v18.2c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-61.4C551,804.7,549.7,803.4,548.1,803.4z
M542.2,780.9l-8.4,49.3h-16.2l-4.1-23.8c0,0,0-0.1,0-0.1c0-0.4-0.1-0.8-0.2-1.1l-4.2-24.4H542.2z M505.8,843.8v-34.6h2.2l4.6,26.8
h26l4.6-26.8h2v34.6H505.8z"/>
<path class="bg0" d="M1062.5,437.3H921.7l0.4-3.3c2.1-16.7,17.1-29.1,34.2-27.5c7.2-13.9,21.7-22.8,37.4-22.8
c15.7,0,30.1,8.8,37.4,22.6c15.8,0.1,29.1,12,31.1,27.6L1062.5,437.3z M928.5,431.5h127.3c-2.9-11.2-13.1-19.3-24.9-19.3
c-0.5,0-0.9,0-1.4,0l-2,0.1l-0.8-1.8c-6-12.8-18.9-21-33-21c-14.2,0-27.2,8.4-33.1,21.3l-0.9,2l-2.2-0.3
C944,410.4,931.7,419,928.5,431.5z"/>
<path class="bg0" d="M665.9,393.2h92.7l-0.4-3.3c-1.9-15.7-15.3-27.5-31.1-27.6c-7.2-13.8-21.7-22.6-37.4-22.6
c-15.8,0-30.2,8.9-37.4,22.8c-8.1-0.7-15.7,1.7-21.7,6.1c-7.2-5.5-16.1-8.6-25.4-8.6c-15.8,0-30.2,8.9-37.4,22.8
c-17.1-1.6-32.1,10.8-34.2,27.5l-0.4,3.3h140.8l-0.4-3.3C672.8,403.7,670,397.8,665.9,393.2z M653.6,368.4l2.2,0.3l0.9-2
c5.9-12.9,18.9-21.3,33.1-21.3c14.1,0,27,8.2,33,21l0.8,1.8l2-0.1c0.5,0,0.9,0,1.4,0c11.9,0,22,8.1,24.9,19.3h-92.7
c-4.8-3-10.5-4.8-16.5-4.8c-2-3.8-4.5-7.2-7.4-10.1C640.3,369,646.8,367.3,653.6,368.4z M540,407.7c3.2-12.5,15.5-21.1,29.1-19
l2.2,0.3l0.9-2c5.9-12.9,18.9-21.3,33.1-21.3c7.7,0,15,2.5,21,6.8c6.2,4.1,10.1,10.3,11.9,14.2c5.6,0.8,6.5,0.6,10.8,2.2
c1.9,0.7,6.3,3,8.3,4.2c5.1,3,8.4,8.5,10,14.5H540z"/>
<path class="bg0" d="M959.8,325.6H768.3l0.4-3.3c2.8-22.7,23.4-39.4,46.6-36.9c9.6-19.2,29.4-31.4,50.9-31.4
c21.4,0,41.1,12.2,50.8,31.2c0.1,0,0.2,0,0.4,0c21.3,0,39.4,16,42,37.1L959.8,325.6z M775,319.8h178.1
c-3.6-16.6-18.4-28.8-35.7-28.8c-0.7,0-1.3,0-2,0.1l-1.9,0.1l-0.8-1.8c-8.4-18-26.6-29.6-46.4-29.6c-20,0-38.3,11.8-46.6,30l-0.9,2
l-2.2-0.3c-2-0.3-3.9-0.5-5.9-0.5C793.4,291,778.6,303.2,775,319.8z"/>
<g id="back">
<g>
<rect x="128.4" y="868.1" class="bg0" width="962.6" height="5.8"/>
</g>
</g>
<g>
<path class="bg1" d="M604,15C283.1,15,23,275.1,23,596s260.1,581,581,581s581-260.1,581-581S924.9,15,604,15z M604,1023.6
c-236.1,0-427.6-191.4-427.6-427.6S367.9,168.4,604,168.4c236.1,0,427.6,191.4,427.6,427.6S840.1,1023.6,604,1023.6z"/>
</g>
<g>
<circle class="bg2" cx="604" cy="596" r="505"/>
</g>
</symbol>
<symbol id="car" viewBox="0 0 43 40.2">
<style type="text/css">
.car0{fill:#B3E5FC;}
.car1{fill:#FFC107;}
.car2{fill:#FF8F00;}
.car3{fill:#BF5300;}
.car4{fill:#FFE082;}
.car5{fill:#455A64;}
.car6{fill:#546E7A;}
.car7{fill:#FFECB3;}
</style>
<g>
<g>
<path class="car0" d="M6.8,10.7l-1,1.3c-0.1,0.1-0.2,0.1-0.3,0.1l-1.6-0.6c-0.2-0.1-0.2-0.3-0.1-0.4l1.6-2c0.1-0.1,0.3-0.1,0.4,0
l1,1.4C6.9,10.5,6.9,10.6,6.8,10.7z"/>
<path class="car0" d="M10.2,6.4l-1,1.3C9.2,7.8,9,7.8,8.9,7.8L7.4,7.1C7.2,7.1,7.2,6.9,7.3,6.7l1.6-2c0.1-0.1,0.3-0.1,0.4,0l1,1.4
C10.3,6.2,10.3,6.3,10.2,6.4z"/>
</g>
<g>
<path class="car1" d="M6.8,10.7l-1,1.3c-0.1,0.1-0.2,0.1-0.3,0.1l-1.4-0.5c-0.2-0.1-0.2-0.3-0.1-0.4l1.6-2C5.7,9,5.9,9,6,9.1
l0.9,1.3C6.9,10.5,6.9,10.6,6.8,10.7z"/>
<path class="car1" d="M10.2,6.4l-1,1.3C9.2,7.8,9,7.8,8.9,7.8L7.5,7.2C7.3,7.2,7.3,7,7.4,6.8l1.6-2c0.1-0.1,0.3-0.1,0.4,0l0.9,1.3
C10.3,6.2,10.3,6.3,10.2,6.4z"/>
</g>
<path class="car2" d="M22.7,6.7l-4.9-3.9c-0.3-0.3-0.9-0.2-1.1,0.1l0,0l-1.5-1.1c-1.1-0.8-2.6-0.6-3.4,0.4L2.1,14.5
c-0.8,1-0.7,2.6,0.4,3.4l1.5,1.2l0,0c-0.3,0.3-0.2,0.9,0.1,1.1l4.9,3.9c0.3,0.2,0.7,0.2,1,0l2.7,2.3l0.6,0.4l7.8,6.2
c-0.2,0.3-0.1,0.7,0.2,1l4.9,3.9c0.3,0.2,0.7,0.2,1,0l0,0c1.4,1,3.7,0.5,5-0.6c1.6-1.2,3.1-3.1,3.8-4c0.7-0.9,4-5,4.8-6.9
c0.7-1.6,0.7-4-0.6-5l0,0c0.2-0.3,0.1-0.7-0.2-1l-4.9-3.9c-0.3-0.2-0.7-0.2-1,0l-7.8-6.2l-0.6-0.5l-2.8-2.2C23.1,7.4,23,7,22.7,6.7
z"/>
<path class="car1" d="M28.4,9l-1.9,0.6c-0.2,0.1-0.3,0.2-0.5,0.3l-0.2,0.3L16.4,3c-1.5-1.2-3.8-0.9-5,0.6L3.4,13.8
c-1.2,1.5-1,3.7,0.5,5l9.1,7.5l-0.2,0.3c-0.1,0.2-0.2,0.3-0.2,0.5l-0.2,2c0,0,1.1,0.6,1.2,0.3l0.2-1.9c0-0.1,0-0.2-0.1-0.2
l-0.4-0.2l0.3-0.4l13.4,10.6c1.3,1,3.6,0.4,4.9-0.6c1.5-1.2,3-3,3.7-3.9c0.7-0.9,3.9-4.9,4.7-6.7c0.7-1.5,0.7-3.9-0.6-4.9
L26.3,10.7l0.3-0.4l0.2,0.3c0.1,0.1,0.2,0.1,0.3,0.1L29,10C29.2,9.9,28.4,9,28.4,9z"/>
<path class="car3" d="M14.7,7.3l-7,8.8c-0.4,0.6-1.3,0.7-1.8,0.2l-1.3-1C4.1,14.8,4,14,4.4,13.5l7-8.8c0.4-0.6,1.3-0.7,1.8-0.2
l1.3,1C15,6,15.1,6.8,14.7,7.3z"/>
<path class="car4" d="M37.9,21.7c1.2,1,1.6,2.6,1,4c-0.7,1.7-3.7,5.6-4.4,6.4c-0.6,0.8-2,2.4-3.5,3.5c-1.2,0.9-2.9,0.9-4.1,0L5.6,19
c-1.3-1-1.5-2.8-0.5-4.1l7.8-9.8c1-1.2,2.8-1.4,4.1-0.4L37.9,21.7z"/>
<g>
<g>
<g>
<path class="car5" d="M27.3,18L20.9,26c-0.3,0.4-0.8,0.5-1.3,0.2l-5-2.9c-0.5-0.3-0.7-0.8-0.6-1.3c0.3-1.2,1-3.4,2.8-5.8
c2.1-2.6,4-3.7,5-4.2c0.5-0.2,1-0.1,1.4,0.3l4,4.3C27.6,17.1,27.6,17.6,27.3,18z"/>
</g>
<g>
<path class="car6" d="M22,12.1c-1,0.5-3,1.6-5,4.2l7.2,5.7l3.2-4c0.3-0.4,0.3-0.9-0.1-1.3l-4-4.3C23,12.1,22.4,11.9,22,12.1z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="car5" d="M35.9,25.8l-5.5,6.9c-0.3,0.3-0.4,0.6-0.4,0.7l0.3,1.2c0,0.1,0.2,0,0.5-0.3c0.6-0.7,1.9-2,3.5-4.1
c1.8-2.2,2.8-3.7,3.3-4.5c0.2-0.3,0.3-0.5,0.2-0.5l-1.2,0C36.5,25.2,36.2,25.4,35.9,25.8z"/>
</g>
<g>
<path class="car6" d="M37.6,25.8c-0.5,0.7-1.5,2.2-3.2,4.4l-1.2-1l2.7-3.5c0.3-0.3,0.5-0.6,0.6-0.6l1.2,0
C37.9,25.2,37.8,25.4,37.6,25.8z"/>
</g>
</g>
</g>
<g>
<g>
<path class="car5" d="M23,31.8l0.5-1.4c-1.8-1.6-4.1-3.4-6.5-5.2c-0.2-0.1-0.4-0.1-0.6,0l-0.8,0.5c-0.1,0.1-0.1,0.3,0,0.4L23,31.8
z"/>
<path class="car5" d="M23.6,32.2l3.2,2.5c0.1,0.1,0.2,0.1,0.3,0.1l1,0.1c0.2,0,0.3-0.2,0.2-0.3c-0.7-0.6-2.2-2.1-4.2-3.9
L23.6,32.2z"/>
</g>
<g>
<path class="car6" d="M25.8,12.9l-0.3,0.9c-0.1,0.2,0,0.4,0.2,0.6c2.3,2,4.5,3.7,6.5,5.2l1.3-0.8l-7.3-5.9
C26,12.7,25.8,12.7,25.8,12.9z"/>
<path class="car6" d="M32.7,20c2.2,1.6,3.9,2.7,4.7,3.2c0.1,0.1,0.3-0.1,0.3-0.2l-0.3-0.9c0-0.1-0.1-0.2-0.2-0.3L34,19.2L32.7,20z
"/>
</g>
</g>
<g>
<path class="car0" d="M2.1,14.5c-0.5,0.6-0.6,1.3-0.5,2c0.1-0.1,0.2-0.1,0.3-0.3L4,13.6c0.3-0.4,0.3-1-0.1-1.3l0,0L2.1,14.5z"/>
<path class="car0" d="M13.6,1.3c-0.7,0-1.3,0.3-1.8,0.9L10,4.4l0,0c0.4,0.3,1,0.3,1.3-0.1l2.1-2.6C13.5,1.6,13.6,1.4,13.6,1.3z"/>
</g>
<g>
<polygon class="car1" points="13.6,3.7 20.5,11.4 13.1,4 "/>
<polygon class="car1" points="3.9,15.9 13,20.8 4,15.3 "/>
</g>
<rect x="22.5" y="20.5" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.175 31.9094)" class="car7" width="12" height="10"/>
<g>
<g>
<path class="car2" d="M29.4,32.3l-0.2,0.2c-0.1,0.1-0.2,0.1-0.2,0.1c-3.6-3.6-7-5.4-7.6-5.7c-0.1,0-0.1-0.1,0-0.2l0.2-0.2
c0.1-0.1,0.2-0.1,0.2-0.1c0.7,0.3,4.1,2.2,7.7,5.8C29.5,32.1,29.5,32.2,29.4,32.3z"/>
</g>
<g>
<path class="car2" d="M35.3,24.9l0.2-0.2c0.1-0.1,0.1-0.2,0-0.2c-4.3-2.7-6.8-5.6-7.3-6.2c0-0.1-0.1,0-0.2,0l-0.2,0.2
c-0.1,0.1-0.1,0.2-0.1,0.2c0.5,0.6,3.1,3.5,7.4,6.2C35.2,25,35.3,24.9,35.3,24.9z"/>
</g>
</g>
<g>
<rect x="20.3" y="22.8" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -8.3977 28.4661)" class="car2" width="10" height="0.3"/>
<rect x="21.9" y="24.1" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -8.7932 30.2181)" class="car2" width="10" height="0.3"/>
<rect x="23.5" y="25.4" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.1887 31.9701)" class="car2" width="10" height="0.3"/>
<rect x="25.2" y="26.6" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.5842 33.7222)" class="car2" width="10" height="0.3"/>
<rect x="26.8" y="27.9" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.9797 35.4742)" class="st2" width="10" height="0.3"/>
</g>
</g>
</symbol>
<style>
.car-container {
transform-origin: 606px 600px;
animation: rotate-right 6s linear 0s infinite;
}
#keyframes rotate-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<use href="#background">
</use>
<g class="car-container">
<use href="#car" width="174" height="174" class="car" transform="translate(210,281) rotate(80)"></use>
</g>
</svg>
I was interested in studying the issue you were having, and found this article. https://css-tricks.com/svg-animation-on-css-transforms/ Even though it's now fairly clear to me that you're not using SMIL, here was my previous response (which is still good to have on-hand, in case it's needed): I don't have tons of experience with what you're asking, however, "Can I use..." is our friend. If you're referring to SMIL: http://caniuse.com/#search=svg%20animation According to their notes, this is not planned for Edge and will eventually be dropped by Chrome. Also, here is an interesting page that may help you - listing alternative, cross-compatible methods of animating SVGs. https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/
I was using animation on transform css attribute. edge does not currently support transforms on svg.
Fill SVG path with colour but on hover fade-in pattern
I am trying to add an SVG image (in this case a flag of Belgium) as the fill of an SVG path (actually an ellipse). On hover, the ellipse's fill has to transition into red. In other words, the fill SVG has to 'fade out'. I tried it in a way I'd do it with CSS, but neither the SVG pattern nor the transition seem to work. I tried on Chrome and Firefox.
svg ellipse {
fill: url(#img1);
transition: fill 400ms;
}
svg:hover ellipse {
fill: red;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" height="480" width="640" viewBox="0 0 640 480">
<defs>
<pattern x="0" y="0" id="img1" height="480" width="640" viewBox="0 0 640 480">
<g fill-rule="evenodd" stroke-width="1pt">
<path d="M0 0h213.335v479.997H0z" />
<path fill="#ffd90c" d="M213.335 0H426.67v479.997H213.335z" />
<path fill="#f31830" d="M426.67 0h213.335v479.997H426.67z" />
</g>
</pattern>
</defs>
<rect fill="none" stroke="blue" x="1" y="1" width="640" height="480"/>
<ellipse stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
</svg>
You can't transition fill like that because the two fills are not something that can be interpolated smoothly between.
What you need to do is have two versions of the ellipse, one on top of the other. Then either fade in or out the top one.
.visible-on-hover {
transition: opacity 400ms;
opacity: 0;
}
.visible-on-hover:hover {
opacity: 1;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" height="480" width="640" viewBox="0 0 640 480">
<defs>
<pattern x="0" y="0" id="img1" height="1" width="1"
viewBox="0 0 640 480" preserveAspectRatio="xMidYMid slice">
<g fill-rule="evenodd" stroke-width="1pt">
<path d="M0 0h213.335v479.997H0z" />
<path fill="#ffd90c" d="M213.335 0H426.67v479.997H213.335z" />
<path fill="#f31830" d="M426.67 0h213.335v479.997H426.67z" />
</g>
</pattern>
</defs>
<rect fill="none" stroke="blue" x="1" y="1" width="640" height="480"/>
<ellipse stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" fill="url(#img1)"/>
<ellipse stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" fill="red" class="visible-on-hover"/>
</svg>
How to create an inset shadow on an svg circle stroke?
How can i create the following widget in SVG? I'm fine with the shapes itself but i'm struggling with the inset shadow on the back circle. I've tried a radial gradient, which 'works' but it doesn't look that great and I have to fiddle with the stop values on the order of thousandths of a percent to get it exactly right and it just feels totally hacky. Is there a better way? Code to produce the SVG: <svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle> <path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;"> </path> </svg>
Well you can do it the easy way with an inset shadow: <svg width="180" height="180"> <defs> <filter id="inset-shadow"> <feFlood flood-color="black"/> <feComposite operator="out" in2="SourceGraphic"/> <feGaussianBlur stdDeviation="2"/> <feComposite operator="atop" in2="SourceGraphic"/> </filter> </defs> <circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle> <path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;"> </path> </svg> But if you really want a 3D effect, then you'll need a lighting effect: <svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="inset-shadow"> <feFlood flood-color="black"/> <feComposite operator="xor" in2="SourceGraphic"/> <feGaussianBlur stdDeviation="1"/> <feComposite operator="in" in2="SourceGraphic" result="map"/> <feDiffuseLighting lighting-color="white" surfaceScale="2" diffuseConstant="1"> <feSpotLight x="-30" y="-30" z="230"/> </feDiffuseLighting> <feBlend mode="multiply" in="SourceGraphic" /> <feComposite operator="in" in2="SourceGraphic"/> </filter> </defs> <circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle> <path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;"> </path> </svg>
Draw a pale grey stroked circle on a darker grey background, apply a gaussian blur filter, and clip the results with a clipPath: <svg width="360" height="360" viewBox="0 0 180 180"> <defs> <!-- Gaussian blur filter used to soften the shadow edges --> <filter id="blur" filterUnits="userSpaceOnUse" x="-90" y="-90" width="180" height="180"> <feGaussianBlur in="SourceGraphic" stdDeviation="1" /> </filter> <!-- Annular clip path for the progress meter background --> <clipPath id="ring" clip-rule="evenodd"> <path d="M0-81A81 81 0 0 1 0 81A81 81 0 0 1 0-81z M0-63A63 63 0 0 1 0 63A63 63 0 0 1 0-63z" /> </clipPath> </defs> <!-- Set orgin to centre of drawing --> <g transform="translate(90,90)"> <!-- Start with pale yellow background --> <rect x="-90" y="-90" width="180" height="180" fill="#e8e0ce" stroke="none" /> <!-- Draw the progress ring on top, and clip using the above clip path --> <g clip-path="url(#ring)"> <!-- Dark grey background --> <rect x="-85" y="-85" width="170" height="170" fill="#433" stroke="none" /> <!-- Lighter grey circle with blur filter applied --> <circle cx="0" cy="2.5" r="72" stroke="#655" stroke-width="18" stroke="#655" fill="none" filter="url(#blur)"/> </g> <!-- Progress bar and text --> <path class="main-arc" d="M 0 -72 A 72 72 0 1 1 -4.52 -71.86" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;" fill="transparent" stroke-width="18" stroke="#b65" stroke-linecap="round" /> <text x="0" y="0" font-size="40" font-family="'Trebuchet MS', sans-serif" fill="#655" text-anchor="middle" dominant-baseline="central"> 20% </text> </g> </svg>
Background color of text in 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 :)