foreignObject doesn't show up on mobile devices - html
I have an SVG element which needs to have some html elements in it. I am using foreignObject tag to do this. This works perfectly on normal browsers, but on mobile devices, its not showing the html inside the foreignObject.
Below is my code:
<div class="container">
<svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#8B65E4">
<path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
<path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
<path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>
<foreignObject x="0%" y="0%" width="80%" height="100%"
requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<h1>
Words appear here on normal browsers but not on mobile devices
</h1>
</div>
</body>
</foreignObject>
</g>
<foreignObject x="20%" y="70%" width="80%" height="100%"
requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="box">
<a class="box-item" href="https://website.com/info" target="_blank">link</a>
</div>
</div>
</body>
</foreignObject>
</g>
</svg>
</div>
Both my foreign objects do NOT show up on Mobile Devices :( . Is there some other alternate to using ForeignObjects? I need it to insert HTML into my SVG.
Thanks everyone.
So, your current example isn't even working for me in desktop browsers.
You'll notice no text in the below example.
<div class="container">
<svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#8B65E4">
<path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
<path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
<path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>
<foreignObject x="0%" y="0%" width="80%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<h1>
Words appear here on normal browsers but not on mobile devices
</h1>
</div>
</body>
</foreignObject>
</g>
<foreignObject x="20%" y="70%" width="80%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="box">
<a class="box-item" href="https://website.com/info" target="_blank">link</a>
</div>
</div>
</body>
</foreignObject>
</g>
</svg>
</div>
However, when I remove the requiredExtension attribute from the foreignObject, everything loads in the desktop browser. The best part is that it also loads on mobile for me. You'll notice the below example displays the intended text when run.
<div class="container">
<svg class="background-svg" width="100" height="300px" viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
<feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix values="0 0 0 0 0.647959184 0 0 0 0 0.549016553 0 0 0 0 0.549016553 0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-1" fill="#8B65E4">
<path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
<path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
<path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>
<foreignObject x="0%" y="0%" width="80%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<h1>
Words appear here on normal browsers but not on mobile devices
</h1>
</div>
</body>
</foreignObject>
</g>
<foreignObject x="20%" y="70%" width="80%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div class="box">
<a class="box-item" href="https://website.com/info" target="_blank">link</a>
</div>
</div>
</body>
</foreignObject>
</g>
</svg>
</div>
Here's a screenshot to this example loaded in the iOS simulator with an iPhone 5.
Related
SVG background-color is not showing in firefoex and safari?
I'm using an svg for my navbar but somehow svg fill color is not showing in firefox or some of the mobile phone? Here is my svg code: <svg width="603" height="158" viewBox="0 0 603 158" fill="none" xmlns="http://www.w3.org/2000/svg"> <g filter="url(#filter0_b)"> <path d="M0 0.525391L603 0.525423V0.525423C589.552 0.525403 577.222 8.01149 571.018 19.9432L516.041 125.679C505.715 145.539 485.192 158 462.807 158H0V0.525391Z" fill="#ffffff"/> <path d="M0.25 0.775391L596.99 0.775423C585.867 2.64133 576.105 9.61836 570.796 19.8278L515.82 125.564C505.536 145.341 485.098 157.75 462.807 157.75H0.25V0.775391Z" stroke="white" stroke-width="0.5"/> </g> <defs> <filter id="filter0_b" x="-10" y="-9.47461" width="623" height="177.475" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feGaussianBlur in="BackgroundImage" stdDeviation="5"/> <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/> </filter> </defs> </svg> Here is what I want : I want my svg background color black something like this But when I open this in Iphone or firefox browser it is showing my background color white? Here is the image how it is showing in Iphone or firefox Someone help me out with this issue Thank You
Hope this will work ..
div{width:600px; height:600px; background: white}
<div><svg width="603" height="158" viewBox="0 0 603 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b)">
<path d="M0 0.525391L603 0.525423V0.525423C589.552 0.525403 577.222 8.01149 571.018 19.9432L516.041 125.679C505.715 145.539 485.192 158 462.807 158H0V0.525391Z" fill="#000000"/>
<path d="M0.25 0.775391L596.99 0.775423C585.867 2.64133 576.105 9.61836 570.796 19.8278L515.82 125.564C505.536 145.341 485.098 157.75 462.807 157.75H0.25V0.775391Z" stroke="white" stroke-width="0.5"/>
</g>
<defs>
<filter id="filter0_b" x="-10" y="-9.47461" width="623" height="177.475" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
</defs>
</svg>
</div>
Safari moving part of SVG
I have a compass SVG which I an animating with CSS. It works fine in Chrome and other browsers, but in Safari, the needle in the compass moves left.
But if i refresh the DOM by unchecking and checking one of the needle's css properties, it works fine.
svg {
height: 124px;
}
.rim {
fill: #D291BC;
}
.needle {
transform-origin: 50% 50%;
transform-box: fill-box;
/* offset of 45 degrees, for 90, do 90 - 45 */
transform: rotate( 70deg );
}
<svg viewBox="0 0 155 208" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M9.4,14.6666667 L28.8333333,14.6666667 C29.9379028,14.6666667 30.8333333,15.5620972 30.8333333,16.6666667 L30.8333333,31 C30.8333333,32.1045695 29.9379028,33 28.8333333,33 L9.4,33 C8.2954305,33 7.4,32.1045695 7.4,31 L7.4,16.6666667 C7.4,15.5620972 8.2954305,14.6666667 9.4,14.6666667 Z" id="path-1"></path>
<filter x="-19.2%" y="-24.5%" width="138.4%" height="149.1%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="-6" dy="-9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<rect id="path-3" x="0" y="0" width="37" height="18.3333333" rx="2"></rect>
<filter x="-12.2%" y="-24.5%" width="124.3%" height="149.1%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="-6" dy="-9" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.81
0 0 0 0 0.81
0 0 0 0 0.81
0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-5" cx="75.5" cy="76" rx="75.5" ry="76"></ellipse>
<filter x="-9.6%" y="-9.5%" width="119.2%" height="119.1%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="-26" dy="-26" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.19
0 0 0 0 0.52
0 0 0 0 0.737
0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-7" cx="75.9389535" cy="76.4418605" rx="63.6482558" ry="64.0697674"></ellipse>
<filter x="-3.9%" y="-3.9%" width="107.9%" height="107.8%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="-7" dy="-7" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.855521896 0 0 0 0 0.855521896 0 0 0 0 0.855521896 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<path d="M14.7893062,20.7478577 L46.4425703,31.6777537 C47.4866481,32.0382745 48.0407805,33.1769267 47.6802596,34.2210045 C47.4822328,34.7944955 47.0345834,35.2470908 46.463303,35.4514071 L14.7919819,46.778537 C14.3619812,46.9323252 13.8922996,46.9343238 13.4610057,46.7842006 L-18.1923297,35.7664264 C-19.2355111,35.4033198 -19.7868206,34.2632981 -19.4237139,33.2201167 C-19.2242702,32.647128 -18.7755125,32.1956483 -18.2037404,31.9927431 L13.467652,20.7534914 C13.8948358,20.6018964 14.3608456,20.5999099 14.7893062,20.7478577 Z" id="path-9"></path>
<filter x="-5.9%" y="-15.2%" width="111.9%" height="130.5%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="1" dy="8" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.810400723 0 0 0 0 0.200090062 0 0 0 0 0.274595959 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
<ellipse id="path-11" cx="74.8284884" cy="76.8604651" rx="4.82848837" ry="4.86046512"></ellipse>
<filter x="-36.2%" y="-36.0%" width="172.5%" height="172.0%" filterUnits="objectBoundingBox" id="filter-12">
<feOffset dx="-4" dy="-4" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 0 0.811764706 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-10-Copy-5" transform="translate(2.000000, 2.000000)" fill-rule="nonzero">
<path d="M76.5,55 C61.3121694,55 49,42.6878306 49,27.5 C49,12.3121694 61.3121694,0 76.5,0 C91.6878306,0 104,12.3121694 104,27.5 C104,42.6878306 91.6878306,55 76.5,55 Z M76.5,48 C87.8218374,48 97,38.8218374 97,27.5 C97,16.1781626 87.8218374,7 76.5,7 C65.1781626,7 56,16.1781626 56,27.5 C56,38.8218374 65.1781626,48 76.5,48 Z" id="Combined-Shape" stroke="#124458" stroke-width="3" fill="#D8D8D8" stroke-linecap="round" stroke-linejoin="round"></path>
<g id="Group-8" transform="translate(57.000000, 28.000000)">
<g id="Group-6">
<g id="Rectangle-9">
<use fill="#E8E8E8" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<path stroke="#124458" stroke-width="3" d="M9.4,16.1666667 C9.12385763,16.1666667 8.9,16.3905243 8.9,16.6666667 L8.9,31 C8.9,31.2761424 9.12385763,31.5 9.4,31.5 L28.8333333,31.5 C29.1094757,31.5 29.3333333,31.2761424 29.3333333,31 L29.3333333,16.6666667 C29.3333333,16.3905243 29.1094757,16.1666667 28.8333333,16.1666667 L9.4,16.1666667 Z" stroke-linejoin="square"></path>
</g>
<g id="Rectangle-9-Copy">
<use fill="#E8E8E8" xlink:href="#path-3"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<rect stroke="#124458" stroke-width="3" stroke-linejoin="square" x="1.5" y="1.5" width="34" height="15.3333333" rx="2"></rect>
</g>
</g>
<g id="Group-7" transform="translate(6.166667, 1.783784)" stroke="#124458" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1.87781955,0.624324324 L1.87781955,5.61891892" id="Line-3"></path>
<path d="M7.76981857,0.624324324 L7.76981857,5.61891892" id="Line-3-Copy"></path>
<path d="M15.2810968,0.624324324 L15.2810968,5.61891892" id="Line-3-Copy-2"></path>
<path d="M22.792375,0.624324324 L22.792375,5.61891892" id="Line-3-Copy-3"></path>
</g>
<g id="Group-7" transform="translate(6.166667, 12.486486)" stroke="#124458" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1.87781955,0.535135135 L1.87781955,4.81621622" id="Line-3"></path>
<path d="M7.82424812,0.535135135 L7.82424812,4.81621622" id="Line-3-Copy"></path>
<path d="M15.3355263,0.535135135 L15.3355263,4.81621622" id="Line-3-Copy-2"></path>
<path d="M22.8468045,0.535135135 L22.8468045,4.81621622" id="Line-3-Copy-3"></path>
</g>
</g>
<g id="Group-9" transform="translate(0.000000, 52.000000)">
<g id="Group-5">
<g id="Oval-6">
<use xlink:href="#path-5"></use>
<use class="rim" fill-opacity="1" xlink:href="#path-5"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-5"></use>
</g>
<g id="Oval-6">
<use fill="#F6F6F6" xlink:href="#path-7"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-7"></use>
</g>
<ellipse id="Oval" fill="#FFFFFF" transform="translate(54.837645, 47.762128) rotate(-40.000000) translate(-54.837645, -47.762128) " cx="54.8376446" cy="47.7621279" rx="25.4593023" ry="15.4651163"></ellipse>
<ellipse id="Oval-Copy" fill="#FFFFFF" transform="translate(37.311047, 86.263018) rotate(-40.000000) translate(-37.311047, -86.263018) " cx="37.3110465" cy="86.2630178" rx="11.7827655" ry="12.6739538"></ellipse>
<path d="M74.622093,20.1649049 L74.622093,13.4164905 M103.661734,27.6663352 L107.035941,21.8220369 M123.496456,47.640592 L129.340754,44.2663848 M130.94556,76.8837209 L137.693975,76.8837209 M123.496456,104.359408 L129.340754,107.733615 M103.661734,125.217386 L107.035941,131.061684 M74.622093,132.718816 L74.622093,139.46723 M47.3382664,125.217386 L43.9640592,131.061684 M27.5035445,104.359408 L21.6592462,107.733615 M20.0544397,76.8837209 L13.3060254,76.8837209 M27.5035445,47.640592 L21.6592462,44.2663848 M47.3382664,27.6663352 L43.9640592,21.8220369" id="Line-2" stroke="#124458" stroke-width="3" stroke-linecap="round"></path>
</g>
<g class="needle" :style="style">
<g id="Group-8-Copy" transform="translate(75.000000, 76.500000) rotate(44.000000) translate(-75.000000, -76.500000) translate(61.000000, 42.000000)">
<g id="Rectangle-9-Copy" transform="translate(14.127461, 33.766841) rotate(90.000000) translate(-14.127461, -33.766841) ">
<use fill="#FF5963" xlink:href="#path-9"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
<path stroke="#124458" stroke-width="3" d="M14.2997206,22.1657103 C14.1926055,22.1287234 14.076103,22.12922 13.9693071,22.1671187 L-17.7020853,33.4063704 C-17.8450284,33.4570967 -17.9572178,33.5699666 -18.0070787,33.7132138 C-18.0978554,33.9740092 -17.960028,34.2590146 -17.6992327,34.3497912 L13.9541027,45.3675654 C14.0619262,45.4050962 14.1793466,45.4045965 14.2868468,45.3661495 L45.9581679,34.0390196 C46.100988,33.9879405 46.2129003,33.8747917 46.262407,33.731419 C46.3525373,33.4703995 46.2140042,33.1857365 45.9529847,33.0956062 L14.2997206,22.1657103 Z" stroke-linejoin="square"></path>
</g>
<path d="M-0.526379321,40.5375395 C-0.578879271,40.5194112 -0.634032823,40.510157 -0.68957451,40.510157 C-0.965716885,40.510157 -1.18957451,40.7340147 -1.18957451,41.010157 L-1.18957451,61.8611801 C-1.18957451,61.9185663 -1.17969553,61.9755241 -1.16037035,62.0295585 C-1.06737754,62.2895718 -0.781209497,62.4249688 -0.521196134,62.3319759 L29.1411004,51.7233662 C29.2839205,51.6722871 29.3958328,51.5591383 29.4453395,51.4157656 C29.5354698,51.1547461 29.3969367,50.8700831 29.1359172,50.7799529 L-0.526379321,40.5375395 Z" id="Rectangle-9-Copy" stroke="#124458" stroke-width="3" fill="#124458" transform="translate(14.141846, 51.435941) rotate(90.000000) translate(-14.141846, -51.435941) "></path>
</g>
</g>
<g id="Oval-6" stroke-linecap="round" stroke-linejoin="round">
<use fill="#E8E8E8" xlink:href="#path-11"></use>
<use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
<use stroke="#124458" stroke-width="3" xlink:href="#path-11"></use>
</g>
</g>
</g>
</g>
</svg>
I read that transform-box: fill-box; should have fixed it on safari but didnt. I am setting the origin to transform-origin: 50% 50%; But Safari doesn't listen to that until the DOM refreshes.
jsfiddle
Side note I know the needle is off by 45 degrees but thats fine. I just have to minus 45 from whatever degree im trying to show
It seems transform-box: fill-box; is bugged on safari when trying to transform it too. As a temporary but not that bad fix, I just used pixel amounts transform-origin: 75px 75px;
SVG filter not being masked as expected in Chrome 87 when mask is curved
In Chrome, since the update to v87, masks and filters in SVGs are behaving in an unexpected way for me when the mask has curves. Here is an example: <svg width="226" height="226" viewBox="0 0 226 226" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="38" y="39" width="148" height="148"> <path d="M112 187C152.869 187 186 153.869 186 113C186 72.1307 152.869 39 112 39C71.1307 39 38 72.1307 38 113C38 153.869 71.1307 187 112 187Z" fill="#F0F1F2"/> </mask> <g mask="url(#mask0)"> <g filter="url(#filter0_d)"> <rect x="12" y="67" width="202" height="92" fill="#4D9DE6"/> </g> </g> <defs> <filter id="filter0_d" x="2" y="59" width="222" height="112" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> <feOffset dy="2"/> <feGaussianBlur stdDeviation="5"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/> </filter> </defs> </svg> In Chrome 86, and in current versions of all major browsers, the behaviour is expected, and the blue rectangle with the drop shadow is masked with a circular shape. But Chrome 87 renders it differently: Example image of the way the SVG is rendered in other browsers/Chrome 86, and in Chrome 87 Anyone know why this is happening?
SVG <object>, <img> & <use> when using "fragmentation" with <symbol> svg's in 1 file not displaying svg's
So I am having issues with svg and all of its quirks, where I cannot <use> an <svg> from a file where I store all of my <svg> designs. I tried using various methods to display the <svg> using <object> <img> & <svg> <use>, but no success. The svg just does not display on the browser when I have an svg inside a <symbol> that contains other attributes like <g> Or <defs>, however <symbol> svg's that contain just <path> work perfectly fine. Project Structure: assets/ |-> svg-icons.svg (<-- Main SVG icons location) |-> checkMark.svg (<-- Copy of <symbol id="checkMark" in svg-icons.svg) index.html svg-icons.svg <svg xmlns="http://www.w3.org/2000/svg"> <!-- Checkmark vector icon --> <symbol id="checkMark" width="27" height="27" viewBox="0 0 27 27" fill="black"> <g filter="url(#filter0_d)"> <path d="M13.6635 6.5408C9.67777 6.5408 6.43506 9.78351 6.43506 13.7692C6.43506 17.7549 9.67777 20.9977 13.6635 20.9977C17.6492 20.9977 20.8919 17.7549 20.8919 13.7692C20.8919 9.78351 17.6492 6.5408 13.6635 6.5408ZM17.4254 11.3467L12.7547 16.907C12.7035 16.968 12.6397 17.0173 12.5678 17.0515C12.4958 17.0858 12.4174 17.1042 12.3377 17.1054H12.3283C12.2504 17.1054 12.1733 17.089 12.1021 17.0573C12.0309 17.0255 11.9672 16.9792 11.9151 16.9212L9.91339 14.6971C9.86255 14.6432 9.82301 14.5796 9.79708 14.5102C9.77115 14.4408 9.75936 14.3669 9.76239 14.2929C9.76543 14.2188 9.78324 14.1461 9.81478 14.0791C9.84631 14.012 9.89093 13.9519 9.94601 13.9024C10.0011 13.8528 10.0655 13.8147 10.1355 13.7904C10.2055 13.7661 10.2797 13.756 10.3537 13.7608C10.4276 13.7655 10.4999 13.785 10.5662 13.8181C10.6325 13.8512 10.6915 13.8972 10.7398 13.9534L12.3137 15.7021L16.574 10.6315C16.6695 10.521 16.8047 10.4525 16.9503 10.4409C17.096 10.4293 17.2403 10.4755 17.3521 10.5695C17.464 10.6634 17.5344 10.7976 17.5481 10.943C17.5618 11.0885 17.5177 11.2335 17.4254 11.3467V11.3467Z" fill="#333333" /> </g> <defs> <filter id="filter0_d" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix" /> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" /> <feOffset /> <feGaussianBlur stdDeviation="2.78016" /> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" /> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" /> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" /> </filter> </defs> </symbol> <!-- House on sale/rent vector icon --> <symbol id='sell-house-vector' width="44" height="52" viewBox="0 0 44 52"> <path d="M10.6449 38.3145C10.6449 39.419 11.5403 40.3145 12.6449 40.3145H40.5794C41.684 40.3145 42.5794 39.419 42.5794 38.3145V14.9915C42.5794 13.887 41.684 12.9915 40.5794 12.9915H12.6449C11.5403 12.9915 10.6449 13.887 10.6449 14.9915V38.3145ZM25.5578 16.8353C26.3121 16.1898 27.4259 16.1954 28.1737 16.8485L36.796 24.3786C37.3467 24.8596 37.0065 25.7662 36.2754 25.7662C35.8382 25.7662 35.4839 26.1205 35.4839 26.5576V35.8306C35.4839 36.9351 34.5885 37.8306 33.4839 37.8306H30.7414C29.6369 37.8306 28.7414 36.9351 28.7414 35.8306V31.3145C28.7414 30.2099 27.846 29.3145 26.7414 29.3145H26.4829C25.3783 29.3145 24.4829 30.2099 24.4829 31.3145V35.8306C24.4829 36.9351 23.5874 37.8306 22.4829 37.8306H20.0966C18.992 37.8306 18.0966 36.9351 18.0966 35.8306V26.5689C18.0966 26.1256 17.7372 25.7662 17.2939 25.7662C16.5484 25.7662 16.2056 24.8384 16.772 24.3536L25.5578 16.8353ZM9.09657 6.2501C7.992 6.2501 7.09657 5.35467 7.09657 4.2501V2C7.09657 0.895432 6.20114 0 5.09657 0H2C0.89543 0 0 0.895431 0 2V49.3145C0 50.419 0.89543 51.3145 2 51.3145H5.09657C6.20114 51.3145 7.09657 50.419 7.09657 49.3145V11.4443C7.09657 10.3397 7.992 9.44429 9.09657 9.44429H42.4029C43.285 9.44429 44 8.72924 44 7.84719C44 6.96514 43.285 6.2501 42.4029 6.2501H9.09657Z" /> </symbol> <!-- Search Property vector icon --> <symbol id='search-vector' width="35" height="34" viewBox="0 0 35 34"> <path fill-rule="evenodd" clip-rule="evenodd" d="M25.7641 23.2125C28.0071 20.3208 29.0643 16.6831 28.7204 13.0396C28.3765 9.39611 26.6575 6.02045 23.9131 3.59938C21.1687 1.17831 17.605 -0.1063 13.9471 0.00689208C10.2891 0.120084 6.81171 1.62258 4.22224 4.2087C1.63051 6.79661 0.12311 10.2754 0.00721327 13.9361C-0.108684 17.5968 1.17565 21.164 3.59848 23.9107C6.02132 26.6574 9.40031 28.3768 13.0469 28.7187C16.6935 29.0606 20.3332 27.9991 23.2243 25.7506L23.3016 25.8315L30.932 33.4637C31.0991 33.6308 31.2975 33.7633 31.5158 33.8538C31.7342 33.9442 31.9682 33.9908 32.2046 33.9908C32.4409 33.9908 32.675 33.9442 32.8933 33.8538C33.1117 33.7633 33.3101 33.6308 33.4772 33.4637C33.6443 33.2965 33.7769 33.0981 33.8673 32.8798C33.9578 32.6614 34.0043 32.4274 34.0043 32.191C34.0043 31.9547 33.9578 31.7207 33.8673 31.5023C33.7769 31.2839 33.6443 31.0855 33.4772 30.9184L25.8451 23.2881C25.8188 23.2622 25.7918 23.237 25.7641 23.2125ZM22.0299 6.75394C23.0455 7.75311 23.8532 8.94347 24.4064 10.2564C24.9597 11.5692 25.2475 12.9787 25.2533 14.4034C25.2591 15.828 24.9828 17.2398 24.4402 18.5571C23.8977 19.8745 23.0997 21.0714 22.0923 22.0788C21.0849 23.0862 19.888 23.8842 18.5707 24.4267C17.2533 24.9692 15.8416 25.2455 14.4169 25.2397C12.9922 25.2339 11.5828 24.9461 10.2699 24.3929C8.95701 23.8397 7.76665 23.032 6.76748 22.0164C4.77071 19.9868 3.65681 17.2505 3.6684 14.4034C3.68 11.5563 4.81615 8.82906 6.82937 6.81583C8.8426 4.80261 11.5698 3.66646 14.4169 3.65486C17.264 3.64327 20.0004 4.75717 22.0299 6.75394Z" /> </symbol> </svg> checkMark.svg <svg xmlns="http://www.w3.org/2000/svg" id="checkMark" width="27" height="27" viewBox="0 0 27 27" fill="black"> <g filter="url(#filter0_d)"> <path d="M13.6635 6.5408C9.67777 6.5408 6.43506 9.78351 6.43506 13.7692C6.43506 17.7549 9.67777 20.9977 13.6635 20.9977C17.6492 20.9977 20.8919 17.7549 20.8919 13.7692C20.8919 9.78351 17.6492 6.5408 13.6635 6.5408ZM17.4254 11.3467L12.7547 16.907C12.7035 16.968 12.6397 17.0173 12.5678 17.0515C12.4958 17.0858 12.4174 17.1042 12.3377 17.1054H12.3283C12.2504 17.1054 12.1733 17.089 12.1021 17.0573C12.0309 17.0255 11.9672 16.9792 11.9151 16.9212L9.91339 14.6971C9.86255 14.6432 9.82301 14.5796 9.79708 14.5102C9.77115 14.4408 9.75936 14.3669 9.76239 14.2929C9.76543 14.2188 9.78324 14.1461 9.81478 14.0791C9.84631 14.012 9.89093 13.9519 9.94601 13.9024C10.0011 13.8528 10.0655 13.8147 10.1355 13.7904C10.2055 13.7661 10.2797 13.756 10.3537 13.7608C10.4276 13.7655 10.4999 13.785 10.5662 13.8181C10.6325 13.8512 10.6915 13.8972 10.7398 13.9534L12.3137 15.7021L16.574 10.6315C16.6695 10.521 16.8047 10.4525 16.9503 10.4409C17.096 10.4293 17.2403 10.4755 17.3521 10.5695C17.464 10.6634 17.5344 10.7976 17.5481 10.943C17.5618 11.0885 17.5177 11.2335 17.4254 11.3467V11.3467Z" fill="#333333" /> </g> <defs> <filter id="filter0_d" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix" /> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" /> <feOffset /> <feGaussianBlur stdDeviation="2.78016" /> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" /> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" /> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" /> </filter> </defs> </svg> index.html <!-- Does not work --> <img src="./assets/svg-icons.svg#checkMark" alt="design-img" title="design-img"> <!-- Does not work --> <object type='image/svg+xml'data="./assets/svg-icons.svg#checkMark"> </object> <!-- Does not work --> <svg width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"> <use xlink:href="./assets/svg-icons.svg#checkMark"></use> </svg> <!-- Works! --> <svg width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"> <use xlink:href="./assets/svg-icons.svg#sell-house-vector"></use> </svg> <!-- Does not work --> <svg width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"> <use xlink:href="./assets/checkMark.svg"></use> </svg> <!-- Works --> <object type='image/svg+xml'data="./assets/checkMark.svg"> </object>
Please try this: In the ./assets/svg-icons.svg change all the <symbol> in <svg> and add
<style type="text/css">
<![CDATA[
svg > svg:not(:target) {
display: none;
}
]]>
</style>
This is saying that only the targeted nested svg elements should be displayed.
Now in the index.html you should be able to see the image and the object.
Please read about How SVG Fragment Identifiers Work
SVG Bevel effect for all edges
#logo {
position:relative;
left:20px;
top:20px
}
#logo .container {
height:200px;
width:200px;
top:50px;
left:50px
}
#logo .container, #logo .slice {
position:absolute;
}
#logo .slice {
height:100%;
width:100%;
}
<div id="logo">
<div class="container">
<div class="slice" id="one">
<svg height="200" width="200">
<polygon points="0,200 100,100 200,200" style="fill:green" />
</svg>
</div>
<div class="slice" id="two">
<svg height="200" width="200">
<polygon points="0,0 100,100 0,200" style="fill:blue" />
</svg>
</div>
<div class="slice" id="three">
<svg height="200" width="200">
<polygon points="0,0 100,100 200,0" style="fill:red" />
</svg>
</div>
<div class="slice" id="four">
<svg height="200" width="200">
<polygon points="200,0 100,100 200,200" style="fill:yellow" />
</svg>
</div>
</div>
</div>
I couldn't figure out how to make a bevel filter as in this logo. All three edges of each slice must be equally darker like the light source is projected right above each slice. Briefly, I am expecting an end result exactly the same with the logo in the link.
EDIT:
<svg>
<filter id="inset-shadow">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="5" />
<feOffset in="offsetblur2" dy="10" result="offsetblur" />
<feOffset dy="-10" result="offsetblur2" />
<feFlood flood-color="rgb(20, 0, 0)" result="color" />
<feComposite in2="offsetblur" operator="in" />
<feComposite in2="SourceAlpha" operator="in" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter>
<polygon points="0,0 100,100 200,0" style="fill:red" filter="url(#inset-shadow)" />
</svg>
Something like this maybe but not enough dark?
Here's a bevel effect using a specular lighting filter: <svg width="800px" height="600px" viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="MyFilter" height="220%"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="30" lighting-color="white" result="specOut"> <fePointLight x="100" y="75" z="200"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="1" k2="1" k3="0" k4="0"/> </filter> </defs> <rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" /> <g filter="url(#MyFilter)" > <path fill="#D90000" d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> </g> </g> </svg> But you can do the same thing more elegantly just using composites and a blur. <svg width="800px" height="600px" viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="MyFilter" height="220%"> <feFlood flood-color="black"/> <feComposite operator="out" in2="SourceGraphic"/> <feGaussianBlur stdDeviation="5"/> <feComposite operator="atop" in2="SourceGraphic"/> </filter> </defs> <rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" /> <g filter="url(#MyFilter)" > <path fill="#D90000" d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> </g> </g> </svg>