Drop shadow hidden outside element svg - javascript

Perhaps someone faced this problem. How can this be corrected without making an internal relative bias? I would like to achieve the effect so that the shadow is on all sides smoothly leaving under the item.
I can only describe on the CSS what I mean (on SVG I don't know how yet):
box-shadow: 0 3px 16px 5px rgba(0,0,0,.3);
Problem:
<svg height="0">
<filter id="drop-shadow-path-line" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="-20" dy="20" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</svg>
<svg height="200" width="200">
<g transform="translate(25 25)">
<rect x="0" y="0" width="100" height="100" fill="orange" filter="url(#drop-shadow-path-line)" />
<g>
<svg>
Need:
#exmaple-svg{
position:relative;
top:25px;
left:25px;
}
.item{
position: absolute;
left: 20px;
top: 20px;
width:100px;
height:100px;
background-color: rgba(255,0,0,.5);
filter:drop-shadow(0 4px 15px #000);
}
<div id="exmaple-svg">
<div class="item"><div>
</div>
PS:Thank You for any help and Your time.
I have seen many solutions and I will write in advance, the shadow need not apply to all items, if You have the same situation and You need to apply a drop shadow to all child elements that it features are done via CSS by adding:filter:drop-shadow(0 3px 15px #000)on the root SVG element
Updated: for #enxaneta (bug with <path />) - shadow is clipped depending on the location of the reference point p2y (Bezier curve). Still looking for a solution... so that it is not circumcised.
<svg viewBox="100 50 250 250">
<path d="M136.8595428466797 123.9515609741211 C 181.78643913269042 123.9515609741211 158.49101142883302 131.44540405273438 203.41790771484375 131.44540405273438" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
<path d="M136.8595428466797 123.9515609741211 C 179.60736618041992 123.9515609741211 157.44182815551758 124.271484375 200.1896514892578 124.271484375" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
<path d="M136.8595428466797 123.9515609741211 C 176.21768913269042 123.9515609741211 155.809761428833 53.60844039916992 195.16790771484375 53.60844039916992" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
<path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 119.24974060058594 202.7005157470703 119.24974060058594" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
<path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 102.39105224609375 202.7005157470703 102.39105224609375" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
<path d="M133.2725830078125 154.7993927001953 C 181.83128128051757 154.7993927001953 156.6526969909668 170.1845245361328 205.21139526367188 170.1845245361328" data-id-device-from="Light-X[room-1550230117502][1]" data-name-device-from="Light-X" data-name-chanel-from="as" data-number-chanel-from="8" data-type-list-name-from="input" stroke-width="2" stroke="#000" fill="none" stroke-linecap="round" stroke-linejoin="round" data-type-event-from="analog" data-id-device-to="Light-X[room-1550230117502][0]" data-name-device-to="Light-X" data-name-chanel-to="aos" data-number-chanel-to="0" data-type-list-name-to="output" data-type-event-to="analog" data-color="#b22222" style="stroke: rgb(178, 34, 34);" class="active" filter="url(#drop-shadow-path-line)"></path>
<filter id="drop-shadow-path-line" width="200%" height="200%">
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</svg>

Redefine the size of your filter and remove the offset (feOffset)
The default value for the x attribute for <filter> is -10%. By setting it 0 you cut off part of the image. Not using the x and y attributes is often a good idea.
<svg height="0">
<filter id="drop-shadow-path-line" width="200%" height="200%">
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</svg>
<svg height="200" width="200">
<g transform="translate(25 25)">
<rect x="0" y="0" width="100" height="100" fill="orange" filter="url(#drop-shadow-path-line)" />
<g>
<svg>
I hope this is what you need.
UPDATE
The OP updated their question by adding a new path.
For clarity I've simplified the svg. The solution in this case implies putting all paths in a <g> element and aplying the filter to the group. Also I'm using filterUnits ="userSpaceOnUse" for the filter.
svg {
border: 1px solid;
}
path {
stroke-width: 2;
stroke: rgb(178, 34, 34);
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
g{
filter:url(#drop-shadow-path-line);
}
<svg viewBox="100 50 250 250">
<defs>
<filter id="drop-shadow-path-line" filterUnits ="userSpaceOnUse" >
<feGaussianBlur result="blurOut" in="SourceAlpha" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<g>
<path d="M136.8595428466797 123.9515609741211 C 181.78643913269042 123.9515609741211 158.49101142883302 131.44540405273438 203.41790771484375 131.44540405273438" sclass="active" ></path>
<path d="M136.8595428466797 123.9515609741211 C 179.60736618041992 123.9515609741211 157.44182815551758 124.271484375 200.1896514892578 124.271484375" class="active" ></path>
<path d="M136.8595428466797 123.9515609741211 C 176.21768913269042 123.9515609741211 155.809761428833 53.60844039916992 195.16790771484375 53.60844039916992" class="active" ></path>
<path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 119.24974060058594 202.7005157470703 119.24974060058594" class="active" ></path>
<path d="M136.8595428466797 123.9515609741211 C 181.30219955444335 123.9515609741211 158.25785903930665 102.39105224609375 202.7005157470703 102.39105224609375" class="active" ></path>
<path d="M133.2725830078125 154.7993927001953 C 181.83128128051757 154.7993927001953 156.6526969909668 170.1845245361328 205.21139526367188 170.1845245361328" class="active" ></path>
</g>
</svg>

I couldn't quite get there and was unable to get the 5px spread specified.
Posting here because it may still be useful.
div { /* just so we can see what the css version would look like */
background:orange;
width:100px;
height:100px;
box-shadow: 0 4px 15px 5px rgba(0,0,0,.3);
}
<svg height="0">
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="15" />
<feOffset dx="0" dy="3" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.4"/>
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</svg>
<svg height="200" width="200" filter="url(#dropShadow)">
<g transform="translate(50 50)" >
<rect x="0" y="0" width="100" height="100" fill="orange" />
<g>
<svg>
<div></div>
P.S. You could use this Codepen by Michael Mullany to construct SVG drop shadows.

Related

SVG - how to combine multiple paths

Am wondering how can we combine multiple svg paths to a single path so that fill like operation can be done.
my svg
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='227.178pt' height='191.646pt' viewBox='0 -191.646 227.178 191.646'>
<g id='page1' >
<g transform='matrix(1 0 0 -1 0 0)'>
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834C5.769237 181.433821 6.526939 183.265855 7.878501 184.613448C9.226377 185.965009 11.058411 186.722994 12.968398 186.722994" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834V11.753911" stroke="#ff0ef4" fill="yellow" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M13.027075 4.988281C11.116805 4.988281 9.28477 5.746094 7.933209 7.097658C6.585617 8.44922 5.827915 10.277342 5.827915 12.187499" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 4.921875H13.027075" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M221.41016 12.121112C221.41016 10.214838 220.648441 8.382804 219.300783 7.031254C217.949225 5.67969 216.11719 4.921875 214.210917 4.921875" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M221.41016 179.523834V12.121112" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 186.722994C216.11719 186.722994 217.949225 185.965009 219.300783 184.613448C220.648441 183.265855 221.41016 181.433821 221.41016 179.523834" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path xmlns="http://www.w3.org/2000/svg" d="M214.210917 186.722994H12.968398" stroke="#ff0ef4" fill="none" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>
i tried to combine path data like this but it messed up the shape
<path xmlns="http://www.w3.org/2000/svg" d="M5.769237 179.523834 C5.769237 181.433821 6.526939 183.265855 7.878501 184.613448 C9.226377 185.965009 11.058411 186.722994 12.968398 186.722994 V11.753911 C11.116805 4.988281 9.28477 5.746094 7.933209 7.097658 C6.585617 8.44922 5.827915 10.277342 5.827915 12.187499 H13.027075 C221.41016 10.214838 220.648441 8.382804 219.300783 7.031254 C217.949225 5.67969 216.11719 4.921875 214.210917 4.921875 V12.121112 C216.11719 186.722994 217.949225 185.965009 219.300783 184.613448 C220.648441 183.265855 221.41016 181.433821 221.41016 179.523834 H12.968398 z" stroke="#ff0ef4" fill="yellow" stroke-width=".720001" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
my goal is to combine them so that i can fill inside of the shape. so any idea how to to do it properly or any there is js/php library which can do it

how to set svg path shadow only on outside?

Is it possible to get a shadow effect only on the outside border?
image
Directly from the docs: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow#SVG
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5"
flood-color="cyan"/>
</filter>
<filter id="shadow3">
<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
flood-color="pink" flood-opacity="0.5"/>
</filter>
</defs>
<circle cx="5" cy="50%" r="4"
style="fill:pink; filter:url(#shadow);"/>
<circle cx="15" cy="50%" r="4"
style="fill:pink; filter:url(#shadow2);"/>
<circle cx="25" cy="50%" r="4"
style="fill:pink; filter:url(#shadow3);"/>
</svg>
Output (middle one should be what you need? Just need to change to a path - I will try to do that now):
With Path:
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5"
flood-color="cyan"/>
</filter>
<filter id="shadow3">
<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
flood-color="pink" flood-opacity="0.5"/>
</filter>
</defs>
<circle cx="5" cy="50%" r="4"
style="fill:pink; filter:url(#shadow);"/>
<path d="M11 1, v8, h8, v-8, z"
style="fill:white; filter:url(#shadow2);"/>
<circle cx="25" cy="50%" r="4"
style="fill:pink; filter:url(#shadow3);"/>
Output:
Now I see some issues, as it's not transparent:
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.5"
flood-color="cyan" flood-opacity="0.5"/>
</filter>
<filter id="shadow3">
<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0"
flood-color="pink" flood-opacity="0.7"/>
</filter>
</defs>
<circle cx="5" cy="50%" r="4"
style="fill:pink; filter:url(#shadow);"/>
<circle cx="25" cy="50%" r="4"
style="fill:pink; filter:url(#shadow3);"/>
<mask id="myMask">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<polygon fill="black" points="0.02,0.02 0.98,0.02 0.98,0.98 0.02,0.98 0.02,0.02" />
<!--
<path d="M14 1, v8, h8, v-8, z" fill="black" />
-->
</mask>
<rect x="16" y="1" width="8" height="8"
mask="url(#myMask)"
fill="white"
stroke="black"
stroke-width="0.2"
style="filter:url(#shadow2);"/>
<!--
<path d="M14 1, v8, h8, v-8, z"
style="fill:white; stroke:black; stroke-width: 0.2;
mask=url(#myMask);
filter:url(#shadow2);"/>
-->
<!--
<path d="M14 1, v8, h8, v-8, z"
style="fill:none; stroke:black; stroke-width: 0.2;
clip-path: polygon(0% 0%, 0% 100%, 1% 100%, 1% 1%, 99% 1%, 99% 99%, 1% 99%, 1% 100%, 100% 100%, 100% 0%);
filter:url(#shadow2);"/>
<rect x="14" y="1" width="8" height="8"
style="fill:white; stroke:black; stroke-width: 0.2;
clip-path: polygon(0% 0%, 0% 100%, 1% 100%, 1% 1%, 99% 1%, 99% 99%, 1% 99%, 1% 100%, 100% 100%, 100% 0%);
filter:url(#shadow2);"/>
-->
Output (not yet transparent):
Next try:
I can do it with a rect or a path (the circle is behind the rect/path and you see through) but I don't (yet) know how to do it for an arbitrary path:
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="2"
flood-color="cyan" flood-opacity="0.7"/>
</filter>
</defs>
<mask id="myMask" maskContentUnits="objectBoundingBox">
<rect fill="white" x="-10%" y="-10%" width="120%" height="120%" />
<polygon fill="black" points="0.02,0.02 0.98,0.02 0.98,0.98 0.02,0.98 0.02,0.02" />
</mask>
<!--
Punch a hole in a shape of a square inside the white rect,
revealing the yellow circle underneath
-->
<circle cx="50" cy="50" r="20" fill="yellow" />
<!--
<rect x="25" y="25" height="50" width="50" fill="white"
stroke="black"
stroke-width="2"
mask="url(#myMask)"
style="filter:url(#shadow2);"
/>
-->
<path d="M25,25 v50, h50, v-50, z" fill="white"
stroke="black"
stroke-width="2"
mask="url(#myMask)"
style="filter:url(#shadow2);"
/>
</svg>
Output:
Another example:
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow">
<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
</filter>
<filter id="shadow2">
<feDropShadow dx="0" dy="0" stdDeviation="0.8" flood-color="cyan" flood-opacity="0.7" />
</filter>
<filter id="shadow3">
<feDropShadow dx="-0.8" dy="-0.8" stdDeviation="0" flood-color="pink" flood-opacity="0.7" />
</filter>
</defs>
<mask id="myMask" maskContentUnits="objectBoundingBox">
<rect fill="white" x="-10%" y="-10%" width="120%" height="120%" />
<polygon fill="black" points="0.015,0.015 0.985,0.015 0.985,0.985 0.015,0.985 0.015,0.015" />
</mask>
<!--
Punch a hole in a shape of a square inside the white rect,
revealing the yellow circle underneath
-->
<circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);" />
<circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);" />
<path d="M14 1, v8, h8, v-8, z" fill="white" stroke="black" stroke-width="0.2" mask="url(#myMask)" style="filter:url(#shadow2);" />
<!-- <rect x="14" y="1" height="8" width="8" fill="white" stroke="black" stroke-width="0.2" mask="url(#myMask)" style="filter:url(#shadow2);" /> -->
<!-- <circle cx="50" cy="50" r="20" fill="yellow" /> -->
<!-- <rect x="25" y="25" height="50" width="50" fill="white" stroke="black" stroke-width="2" mask="url(#myMask)" style="filter:url(#shadow2);" /> -->
</svg>
Output:

SVG Animation works in Chrome, but doesn't in Firefox and other browsers

Okay, so I have an SVG that is basically a clock animation. It works as intended in Chrome when I'm testing it, but loses form when I try it in Firefox or Safari.
This is the SVG in question:
<svg id="svg" width="100%" viewBox="-400 -150 800 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<defs>
<path id="sec" d="M0,-140A140,140 0 0,1 0,140A140,140 0 0,1 0,-140" stroke-dasharray="880" stroke-dashoffset="-880.1"
fill="none">
<animate id="second" attributeName="stroke-dashoffset" dur="1s" repeatCount="60" begin="0s;second.end" additive="sum"
accumulate="sum" calcMode="spline" values="0;-14.66" keyTimes="0;1" keySplines="0.42 0.0 0.58 1.0" />
</path>
<path id="min" d="M0,-130A130,130 0 0,1 0,130A130,130 0 0,1 0,-130" stroke-dasharray="817" stroke-dashoffset="-817.1"
fill="none">
<animate id="minute" attributeName="stroke-dashoffset" dur="60s" repeatCount="60" begin="0s;minute.end" additive="sum"
accumulate="sum" calcMode="spline" values="0;0;-13.613" keyTimes="0;0.9833;1" keySplines="0,0,1,1;0.42 0.0 0.58 1.0" />
</path>
<path id="hr" d="M0,-120A120,120 0 0,1 0,120A120,120 0 0,1 0,-120" stroke-dasharray="754" stroke-dashoffset="-754.1"
fill="none">
<animate id="hour" attributeName="stroke-dashoffset" dur="3600s" repeatCount="12" begin="0s;hour.end" additive="sum"
accumulate="sum" calcMode="spline" values="0;0;-62.83" keyTimes="0;0.9997222;1" keySplines="0,0,1,1;0.42 0.0 0.58 1.0" />
</path>
<mask id="mask" maskUnits="userSpaceOnUse" x="-150" y="-150" width="300" height="300">
<g stroke-width="10" stroke-linecap="round" stroke="white">
<use xlink:href="#sec" x="0" y="0" />
<use xlink:href="#min" x="0" y="0" />
<use xlink:href="#hr" x="0" y="0" />
</g>
</mask>
</defs>
<g stroke-width="7" stroke-linecap="round" mask="url(#mask)">
<g stroke="hsla(0, 95%, 25%, 1)">
<use xlink:href="#sec" />
</g>
<g stroke="hsla(188, 15%, 35%, 1)">
<use xlink:href="#min" />
</g>
<g stroke="hsla(218, 5%, 15%, 1)">
<use xlink:href="#hr" />
</g>
</g>
</svg>
<script>
window.onload = function () {
var now = new Date();
var h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
var curr = h * 60 * 60 + m * 60 + s;
svg.setCurrentTime(curr);
};
</script>
The second hand moves to the next position all the way from the top instead of animating from the previous place. You can test this yourself. This is the link to the code hosted on codepen.

How to reference inline svg as cursor in css style?

how to reference an inline svg as cursor?
In the code attach, first cursor declaration "cursor:pointer" an second (png) works without problems.
Third declaration doesn't work for me. What I'm doing wrong?. Only need a working sample
Thanks in advance
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<script type='text/ecmascript'>
<style>
.boton
{
/*cursor:pointer
cursor: url(data:image/png;base64,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), auto;);
*/
cursor: url(data:image/svg+xml;utf8,<svg fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>), auto;);
}
</style>
</script>
<g id="toggleInsertaElementoLS" class="boton" toggleButton="true" triStateButton="false">
<path id="bordeLS" fill="url(#rellenoBotonesInsercion)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M6.875,282.375h46c1.104,0,2,0.895,2,2v21c0,1.104-0.896,2-2,2h-46c-1.104,0-2-0.896-2-2v-21
C4.875,283.27,5.771,282.375,6.875,282.375z"/>
<g id="dibujoLS">
<path fill="#660000" stroke="#660000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M22.46,296.273v-9.67h1.28v8.529h4.763v1.141H22.46z"/>
<path fill="#660000" stroke="#660000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M29.59,293.156l1.209-0.104c0.055,0.479,0.188,0.881,0.398,1.188c0.207,0.313,0.533,0.563,0.973,0.752
c0.44,0.191,0.933,0.285,1.482,0.285c0.489,0,0.92-0.074,1.293-0.217c0.374-0.146,0.652-0.346,0.834-0.6
c0.182-0.25,0.276-0.527,0.276-0.826c0-0.31-0.088-0.57-0.264-0.795c-0.178-0.229-0.464-0.414-0.871-0.57
c-0.26-0.1-0.833-0.26-1.719-0.471c-0.891-0.216-1.511-0.416-1.867-0.604c-0.462-0.241-0.806-0.543-1.03-0.896
c-0.23-0.359-0.342-0.77-0.342-1.205c0-0.49,0.138-0.943,0.417-1.371c0.275-0.422,0.679-0.748,1.213-0.965
c0.532-0.229,1.124-0.332,1.775-0.332c0.716,0,1.349,0.117,1.897,0.346c0.548,0.232,0.967,0.57,1.264,1.021
c0.292,0.438,0.453,0.945,0.475,1.521l-1.227,0.09c-0.064-0.604-0.288-1.063-0.667-1.383c-0.382-0.313-0.944-0.469-1.688-0.469
c-0.772,0-1.337,0.141-1.691,0.428c-0.354,0.281-0.531,0.625-0.531,1.025c0,0.346,0.126,0.631,0.375,0.854
c0.245,0.229,0.889,0.453,1.931,0.689c1.038,0.229,1.752,0.438,2.14,0.617c0.563,0.258,0.979,0.588,1.246,0.979
c0.267,0.396,0.403,0.857,0.403,1.375c0,0.521-0.148,1.002-0.442,1.455s-0.716,0.813-1.269,1.063
c-0.554,0.256-1.172,0.383-1.864,0.383c-0.876,0-1.608-0.127-2.199-0.385c-0.593-0.262-1.056-0.646-1.392-1.148
C29.784,294.389,29.607,293.811,29.59,293.156z"/>
<line shape-rendering="geometricPrecision" fill="none" stroke="#2F5F9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" x1="8" y1="301.125" x2="51.75" y2="301.125"/>
</g>
</g>
</svg>
It works once I cleaned up the syntax a little i.e. the extraneous brackets and semicolons.
The cursor is the one you provided.
.boton {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FF0000" height="48" viewBox="0 0 24 24" width="48"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>'), auto;
}
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
>
<rect class="boton" width="100%" height="100%" fill="blue"/>
</svg>

Calculate SVG.Text Length before drawing [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>
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.
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>
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 :)

Categories