SVG <animate> offset from 0 not working - css
The purpose of the animation is that fill background colour as loading battery. The solution seems to me apple gradient animation which shows as loading. But in the current SVG linearGradient animate not working when attribute offset="0%"
div {
float: left;
width: 50%;
padding: 10px;
box-sizing: border-box;
}
<div>
<p><small>offset from 0%</small> <strong>not working</strong></p>
<svg viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" fill="#EAEAEA">
<rect id="Brick-4" x="77.5" y="10" width="13.5" height="68" rx="3"></rect>
<rect id="Brick-3" x="56" y="10" width="13.5" height="68" rx="3"></rect>
<rect id="Brick-2" x="34.5" y="10" width="13.5" height="68" rx="3"></rect>
<rect id="Brick-1" x="13" y="10" width="13.5" height="68" rx="3"></rect>
<path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"
fill="url(#fromzero)
"></path>
<defs>
<linearGradient id="fromzero" x1="0">
<stop offset="0%" stop-color="#4c7eaf"></stop>
<stop offset="0%" stop-color="#828282"></stop>
<animate attributeName="x1" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
</linearGradient>
</defs>
</g>
</g>
</svg>
</div>
<div>
<p><small>offset from 1%</small> <strong>working</strong></p>
<svg viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mysvg">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" fill="#EAEAEA">
<rect id="Brick-4" x="77.5" y="10" width="13.5" height="68" rx="3"></rect>
<rect id="Brick-3" x="56" y="10" width="13.5" height="68" rx="3"></rect>
<rect id="Brick-2" x="34.5" y="10" width="13.5" height="68" rx="3"></rect>
<rect id="Brick-1" x="13" y="10" width="13.5" height="68" rx="3"></rect>
<path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"
fill="url(#fromone)
"></path>
<defs>
<linearGradient id="fromone" x1="0">
<stop offset="1%" stop-color="#4c7eaf"></stop>
<stop offset="1%" stop-color="#828282"></stop>
<animate attributeName="x1" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
</linearGradient>
</defs>
</g>
</g>
</svg>
</div>
Chaning the code to this
<linearGradient id="fromzero" x1="0">
<stop offset="50%" stop-color="#4c7eaf"></stop>
<stop offset="50%" stop-color="#828282"></stop>
<animate attributeName="x1" dur="5s" from="-100%" to="100%" repeatCount="indefinite" />
</linearGradient>
Makes the gradient split the background-color in the two colors, and moves it from -100% to 100%, making it possible to go from 0% to 100%, while giving it the exact same effect.
I've now also added the animation you wanted. It is being triggered by clicking on the svg element.
Here's a Fiddle of the result
Hope this helps
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 :)
svg fill background image fit to the screen?
I am adding SVG fill with a background image. But it is not fit the image properly. It is looking like my screenshot http://take.ms/8cloN <svg width="897px" height="452px" viewBox="0 0 897 452" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> <!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch --> <title>IPAD 2</title> <desc>Created with Sketch.</desc> <defs></defs> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%" > <image xlink:href="https://images.unsplash.com/photo-1534002778889-3f1b078de59b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a2e808d0d3560da6d4845fe7e7bfc19d&auto=format&fit=crop&w=750&q=80" x="0" y="0" /> </pattern> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="IPAD" sketch:type="MSLayerGroup" transform="translate(681.000000, 55.000000)" stroke="#7E89A3"> <path d="M202.986,317 L12.097,317 C5.462,317 0.083,311.623 0.083,304.99 L0.083,12.093 C0.083,5.46 5.461,0.083 12.097,0.083 L202.986,0.083 C209.622,0.083 215,5.46 215,12.093 L215,304.99 C215,311.623 209.622,317 202.986,317 Z" id="bezel" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path> <path d="M202.986,317 L12.097,317 C5.462,317 0.083,311.623 0.083,304.99 L0.083,12.093 C0.083,5.46 5.461,0.083 12.097,0.083 L202.986,0.083 C209.622,0.083 215,5.46 215,12.093 L215,304.99 C215,311.623 209.622,317 202.986,317 Z" id="bezel-2" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path> <rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="17" y="32" width="181.999" height="252.917"></rect> <circle id="lock" sketch:type="MSShapeGroup" cx="108.021" cy="300.021" r="8.021"></circle> <circle id="camera" sketch:type="MSShapeGroup" cx="106.99" cy="16.99" r="2.99"></circle> </g> <g id="Laptop" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)" stroke="#8492A5"> <path d="M594,0 L98,0 C84.50415,0 73,11.0738184 73,24.7901127 L73,351.027995 L619,351.027985 L619,24.7901127 C618.999971,11.0728209 607.537479,0 594,0 Z" id="bezel" stroke-width="2" fill="#FEFEFE" sketch:type="MSShapeGroup"></path> <circle id="webcam" stroke-width="2" sketch:type="MSShapeGroup" cx="347" cy="19" r="4"></circle> <g id="bottom" transform="translate(0.000000, 351.000000)" sketch:type="MSShapeGroup"> <path d="M640.812,31.01 L51.288,31.01 C20.641,31.01 0,20.494 0,16.022 L0,2.428 C0,1.084 1.335,0 2.995,0 L689.104,0 C690.766,0 692.103,1.084 692.103,2.428 L692.103,16.557 C692.096,20.092 676.112,31.01 640.812,31.01 Z" id="Shape" stroke-width="2" fill="#FDFDFD"></path> <path d="M0.5,14.5 L690.242676,14.5" id="Line" stroke-linecap="square"></path> </g> <rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="95" y="39" width="501.073853" height="292.009"></rect> <path d="M421,352 L421,355.087 C421,357.288 416.666719,357.952714 413.386719,357.952714 L278.815286,357.952714 C275.364286,357.952714 271,357.289 271,355.087 L271,352" id="touchpad" fill="#FFFFFF" sketch:type="MSShapeGroup"></path> </g> <g id="iphone" sketch:type="MSLayerGroup" transform="translate(576.000000, 177.000000)" stroke="#7E89A3"> <path d="M130,257.964 C130,266.797 122.809,273.956 113.938,273.956 L16.063,273.956 C7.192,273.956 0.001,266.797 0.001,257.964 L0.001,16.073 C0.001,7.24 7.192,0.081 16.063,0.081 L113.938,0.081 C122.809,0.081 130,7.24 130,16.073 L130,257.964 L130,257.964 Z" id="bezel" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path> <rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="9" y="36" width="111.93" height="199.084"></rect> <path d="M77,25.746 C77,26.381 76.561,26.893 76.02,26.893 L55.918,26.893 C55.376,26.893 54.938,26.38 54.938,25.746 L54.938,23.166 C54.938,22.531 55.377,22.019 55.918,22.019 L76.02,22.019 C76.561,22.019 77,22.532 77,23.166 L77,25.746 L77,25.746 Z" id="speaker" sketch:type="MSShapeGroup"></path> <circle id="camera" sketch:type="MSShapeGroup" cx="66" cy="12" r="3"></circle> <ellipse id="lock" sketch:type="MSShapeGroup" cx="65.04" cy="254.001" rx="10.04" ry="10.001"></ellipse> </g> </g> </svg> I want it like my screenshot http://take.ms/ViaOB is it possible?
In your pattern tag, replace patternUnits="userSpaceOnUse" with patternContentUnits="objectBoundingBox". Then add height="1" width="1" preserveAspectRatio="none" to the image tag inside your pattern tag. Like this: <pattern id="img1" id="pattern1" patternContentUnits="objectBoundingBox" width="100%" height="100%" > <image height="1" width="1" preserveAspectRatio="none" xlink:href="https://images.unsplash.com/photo-1534002778889-3f1b078de59b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a2e808d0d3560da6d4845fe7e7bfc19d&auto=format&fit=crop&w=750&q=80" x="0" y="0" /> </pattern>
Animate SVG to run at intervals
I have this SVG animation of an hourglass. I have successfully implemented the fill and flowdown animation in SMIL. but I am not able to do the flip animation. I want the flip animation to be in SMIL and run at the last 0.2s of the total duration of the fill animation and also run at intervals.
For Example:
If the total duration of the fill animation is 5s then flip animation should run after a delay of 4.8s.
If the total duration of the fill animation is 10s then flip animation should run after a delay of 9.8s.
#keyframes flip {
0% {
transform: rotate(0deg);
}
98% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
#hourglass,
#hourglass #upper-fill-clip,
#hourglass #lower-fill-clip {
fill: #000000;
}
#hourglass {
animation-name: flip;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: center center;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="212.17653" height="310" viewBox="0 0 212.17653 310" id="hourglass">
<defs>
<clipPath id="flowdown">
<path d="m 153.09976,190.92975 c 22.09717,217.28036 179.31249,274.21877 197.89215,327.9765 l 62.9374,0 c 18.72854,-53.17156 176.30873,-105.92478 197.9976,-327.99097" style="stroke-width:0" />
</clipPath>
<clipPath id="fillup">
<path d="M 296.23029,608.69417 C 236.36177,663.1914 150.52311,748.96721 150.52311,928.875 l 231.9375,0 231.9375,0 c 0,-181.67405 -83.81727,-266.73823 -143.5691,-320.06035" style="stroke-width:0" />
</clipPath>
</defs>
<g transform="matrix(0.3117516,0,0,0.3117516,-13.144444,-11.10242)" id="layer1">
<g transform="translate(14,-26)" id="g4027">
<rect width="648.51801" height="43.605999" x="44.201607" y="-1039.9561" transform="scale(1,-1)" id="rect3782" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="-999.65149" transform="scale(1,-1)" id="rect3784" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<path d="m 150.53125,138.59375 c 0,276.24024 202.375,328.98438 202.375,390.46875 0,1.83297 -1.12281,3.21907 -0.71875,4.6875 -0.40197,1.4611 0.71875,2.83465 0.71875,4.65625 0,59.91583 -202.375,114.22851 -202.375,390.46875 l 231.9375,0 231.9375,0 c 0,-282.29589 -202.375,-331.32933 -202.375,-390.46875 0,-1.8216 1.12072,-3.19515 0.71875,-4.65625 0.40406,-1.46843 -0.71875,-2.85453 -0.71875,-4.6875 0,-61.32924 202.375,-108.17286 202.375,-390.46875 l -231.9375,0 z" id="path3788" style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g transform="translate(14,-26)" id="g4043">
<rect width="648.51801" height="43.605999" x="44.201607" y="77.651443" id="rect4033" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="117.95601" id="rect4035" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<g clip-path="url(#flowdown)">
<rect width="744.09448" height="1052.3622" x="0" y="0" id="upper-fill-clip" />
<animate xlink:href="#upper-fill-clip" attributeName="y" from ="190" to="519" dur="10s" begin="0s" repeatCount="indefinite" />
</rect>
</g>
<g clip-path="url(#fillup)" >
<rect width="744.09448" height="1052.3622" x="0" y="0" id="lower-fill-clip">
<animate xlink:href="#lower-fill-clip" attributeName="y" from ="911" to="610" dur="10s" begin="0s" repeatCount="indefinite" />
</rect>
</g>
</g>
</svg>
How can I convert this working CSS animation to SMIL?
I kind of found the answer to my own question. Here's the snippet.
#hourglass,
#hourglass #upper-fill-clip,
#hourglass #lower-fill-clip {
fill: #000000;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="212.17653" height="310" viewBox="0 0 212.17653 310" id="hourglass">
<defs>
<clipPath id="flowdown">
<path d="m 153.09976,190.92975 c 22.09717,217.28036 179.31249,274.21877 197.89215,327.9765 l 62.9374,0 c 18.72854,-53.17156 176.30873,-105.92478 197.9976,-327.99097" style="stroke-width:0" />
</clipPath>
<clipPath id="fillup">
<path d="M 296.23029,608.69417 C 236.36177,663.1914 150.52311,748.96721 150.52311,928.875 l 231.9375,0 231.9375,0 c 0,-181.67405 -83.81727,-266.73823 -143.5691,-320.06035" style="stroke-width:0" />
</clipPath>
</defs>
<g transform="matrix(0.3117516,0,0,0.3117516,-13.144444,-11.10242)" id="layer1">
<g transform="translate(14,-26)" id="g4027">
<rect width="648.51801" height="43.605999" x="44.201607" y="-1039.9561" transform="scale(1,-1)" id="rect3782" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="-999.65149" transform="scale(1,-1)" id="rect3784" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<path d="m 150.53125,138.59375 c 0,276.24024 202.375,328.98438 202.375,390.46875 0,1.83297 -1.12281,3.21907 -0.71875,4.6875 -0.40197,1.4611 0.71875,2.83465 0.71875,4.65625 0,59.91583 -202.375,114.22851 -202.375,390.46875 l 231.9375,0 231.9375,0 c 0,-282.29589 -202.375,-331.32933 -202.375,-390.46875 0,-1.8216 1.12072,-3.19515 0.71875,-4.65625 0.40406,-1.46843 -0.71875,-2.85453 -0.71875,-4.6875 0,-61.32924 202.375,-108.17286 202.375,-390.46875 l -231.9375,0 z" id="path3788" style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<g transform="translate(14,-26)" id="g4043">
<rect width="648.51801" height="43.605999" x="44.201607" y="77.651443" id="rect4033" style="fill:#000000;fill-opacity:1;stroke:none" />
<rect width="579.82764" height="60" x="78.546791" y="117.95601" id="rect4035" style="fill:#000000;fill-opacity:1;stroke:none" />
</g>
<g clip-path="url(#flowdown)">
<rect width="744.09448" height="1052.3622" x="0" y="519" id="upper-fill-clip" />
</g>
<g clip-path="url(#fillup)" >
<rect width="744.09448" height="1052.3622" x="0" y="0" id="lower-fill-clip" />
</g>
<animate id="aniFlowdown" xlink:href="#upper-fill-clip" attributeName="y" from ="190" to="519" dur="10s" begin="0;aniFlip.end" />
<animate id="aniFillup" xlink:href="#lower-fill-clip" attributeName="y" from ="911" to="610" dur="10s" begin="0;aniFlowdown.begin" />
<animateTransform id="aniFlip" xlink:href="#hourglass" attributeName="transform" type="rotate" from="0 0 0" to="180 0 0" begin="aniFlowdown.end-0.2" dur="0.2s" />
</g>
</svg>
unwanted horizontal line from svg mask
I'm rendering a line using an SVG mask and gradient, similar to how Github renders sparklines for their "year of activity" charts that are displayed when viewing and organization's list of repositories.
For some reason when the width of the SVG is a certain value, a horizontal line appears at the top of the lines:
The line appears to correspond to the SVG group element that houses a rectangle which is applied a mask and a gradient fill:
However, resizing the SVG to a different width results in the line not displaying:
Here is the markup for an example SVG:
body {
background: #000;
}
<svg width="281" height="50">
<defs>
<linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f03b20"></stop>
<stop offset="50%" stop-color="#feb24c"></stop>
<stop offset="100%" stop-color="#ffeda0"></stop>
</linearGradient>
<mask id="mask-36" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="-2" width="281" height="46" style="stroke: none; fill: url("#gradient-36"); mask: url("#mask-36");">
</rect>
</g>
</svg>
And here is a link to live code showing the bug:
https://bl.ocks.org/clhenrick/ed231b1ba92c87f82529c153e7c77a4e/4954afeeccc9b2d61547e08bb901a8ae23c32c83
Here is a link to an example using the same technique with no bug, just a different size width for the SVG, mask, rect and different sized path:
https://bl.ocks.org/clhenrick/e0b06bbb361780f818993e956dccc5d8/d1fcd24b4df5571ed7069f4a45ed9932a48d74c2
Furthermore, with the buggy example when I move the path element out of the mask and into the group element, the path looks correct:
https://bl.ocks.org/clhenrick/b1ac9490a5708afbcb3ef7f93bb45b3a/5df5bd70333da98d866e7f59e3dd74060ff87474
I'm not sure why this happens at certain SVG widths or SVG path sizes and not at others.
It's not clear to me why github do their sparklines graphs using that complicated arrangement of rects, masks, and transforms. It appears it may be triggering a bug in Chrome.
Have you considered just simplifying the graph? Just use the sparkline path on its own, and apply the gradient directly to it?
body {
background: #000;
}
<svg width="281" height="50">
<defs>
<linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f03b20"></stop>
<stop offset="50%" stop-color="#feb24c"></stop>
<stop offset="100%" stop-color="#ffeda0"></stop>
</linearGradient>
</defs>
<path fill="none" stroke-width="2" stroke="url(#gradient-36)" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</svg>
Am not sure what is causing the issue but here is a work around to avoid it. The idea is to hide this line by changing the position of the rect (its y value).
So here is the buggy SVG :
body {
background:black;
}
<svg width="281" height="50">
<defs>
<linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f03b20"></stop>
<stop offset="50%" stop-color="#feb24c"></stop>
<stop offset="100%" stop-color="#ffeda0"></stop>
</linearGradient>
<mask id="mask-36" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="-2" width="281" height="46" style="stroke: none; fill: url("#gradient-36"); mask: url("#mask-36");">
</rect>
</g>
</svg>
And if you change the y from -2 to 34 the line will disappear like this :
body {
background:black;
}
<svg width="281" height="50">
<defs>
<linearGradient id="gradient-36" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f03b20"></stop>
<stop offset="50%" stop-color="#feb24c"></stop>
<stop offset="100%" stop-color="#ffeda0"></stop>
</linearGradient>
<mask id="mask-36" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="34" width="281" height="46" style="stroke: none; fill: url("#gradient-36"); mask: url("#mask-36");">
</rect>
</g>
</svg>
This will of course affect the fill you are applying as it's a linear background. So you may change it to adjust the color as you need.
I made more tests trying to point out what can be the cause of the issue. I tried to eliminate some part of the SVG (like the linear-gradien) and to change some values and here is what i got :
body {
background: black;
}
svg {
display: block;
}
<svg width="281" height="50">
<defs>
<mask id="mask-36" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="0" width="281" height="46" style="stroke: none; fill:red; mask: url("#mask-36");">
</rect>
</g>
</svg>
<svg width="281" height="50">
<g transform="translate(0, 2)">
<path fill="none" stroke-width="2" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</g>
</svg>
<svg width="281" height="50">
<defs>
<mask id="mask-35" x="0" y="0" width="281" height="46">
<path fill="none" stroke-width="3" stroke="#ffeda0" d="M0,46C2.7238899312070046,46,5.447779862414009,46,8.171669793621014,46C10.811353450072962,46,13.451037106524913,46,16.09072076297686,46C18.814610694183866,46,21.53850062539087,46,24.262390556597875,46C26.98628048780488,46,29.71017041901188,46,32.434060350218886,46C34.89434803001876,46,37.35463570981863,46,39.81492338961851,46C42.53515217844486,46,45.25538096727121,34.5,47.97560975609756,34.5C50.611632270168855,34.5,53.247654784240154,46,55.88367729831145,46C58.60756722951845,46,61.331457160725456,34.5,64.05534709193246,34.5C66.69136960600376,34.5,69.32739212007505,46,71.96341463414635,46C74.68730456535334,46,77.41119449656036,46,80.13508442776735,46C82.85897435897435,46,85.58286429018136,46,88.30675422138836,46C90.94277673545966,46,93.57879924953095,34.5,96.21482176360225,34.5C98.93871169480926,34.5,101.66260162601625,46,104.38649155722327,46C107.02617521367522,46,109.66585887012717,46,112.30554252657912,46C115.02943245778611,46,117.75332238899313,46,120.47721232020012,46C123.20110225140714,46,125.92499218261413,34.5,128.64888211382114,34.5C131.19703721075672,34.5,133.74519230769232,46,136.2933474046279,46C139.01357619345424,46,141.7338049822806,46,144.45403377110694,46C147.09005628517824,46,149.7260787992495,46,152.3621013133208,46C155.08599124452783,46,157.80988117573483,46,160.53377110694186,46C163.16979362101316,46,165.80581613508443,46,168.44183864915573,46C171.16572858036272,46,173.88961851156972,46,176.61350844277672,46C179.33739837398372,46,182.06128830519074,46,184.78517823639774,46C187.42120075046904,46,190.05722326454034,46,192.69324577861164,46C195.41713570981864,46,198.14102564102564,46,200.86491557223263,46C203.50459922868458,46,206.14428288513653,46,208.78396654158848,46C211.50785647279548,46,214.2317464040025,46,216.9556363352095,46C219.6795262664165,46,222.4034161976235,46,225.1273061288305,46C227.58759380863037,46,230.04788148843028,46,232.50816916823015,46C235.2283979570565,46,237.94862674588282,46,240.66885553470917,46C243.30487804878047,46,245.94090056285177,46,248.57692307692307,46C251.30081300813006,46,254.0247029393371,46,256.7485928705441,46C259.38461538461536,46,262.0206378986867,34.5,264.65666041275796,34.5C267.38055034396496,34.5,270.10444027517195,46,272.82833020637895,46C275.55222013758595,46,278.276110068793,46,281,46">
</path>
</mask>
</defs>
<g transform="translate(0, 2)">
<rect x="0" y="0" width="281" height="46" style="stroke: none; fill:red; mask: url("#mask-35");">
</rect>
</g>
</svg>
The first one is the buggy and when i tried to add the path directly into the SVG it works fine (the second one). In the third one i changed the value of stroke in the path to make it 3 and the line disappeared.
I can conclude that it's because you are using the path as a mask. It can be a bug related to some browser and not a bug with your code. In this case you can simply consider using the path directly as an element (and you have a lot of possiblities to color it using gradient) or use my trick in order to hide the bug.
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 :)