SVG filter on inline symbol - html

I am having a hard time applying a filter to an inline SVG symbol. I can make it work fine in a normal external SVG file but as soon as I make it inline with an HTML document, the filtered objects disappear. Is there anything I'm missing with the filter attribute? This fails for me in an up to date Chrome 57.
<html>
<body>
<svg style="display:none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur_inline">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
<symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
</symbol>
<symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
</symbol>
</defs>
</svg>
<p>Symbol with a green and blurred blue box:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#filtered" x="10" y="35" ></use>
</svg>
<p>Second symbol with no filter applied:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>
</body>
</html>


Setting your SVG to display:none will make it non-functional because it disables all CSS.
<html>
<body>
<svg width="0" height="0">
<defs>
<filter id="blur_inline">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
<symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
</symbol>
<symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
<rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
<rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
</symbol>
</defs>
</svg>
<p>Symbol with a green and blurred blue box:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#filtered" x="10" y="35" ></use>
</svg>
<p>Second symbol with no filter applied:</p>
<svg width="100mm" height="50mm">
<use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>
</body>
</html>

Related

How can I make this SVG mask responsive and keep the shadow at the bottom right of the circle? [duplicate]

This question already has answers here:
How to resize a svg
(2 answers)
Closed 17 hours ago.
I have the below SVG which I am using as a mask to overlay on an image, I am trying to make the circle responsive, so it shrinks on mobile devices but haven't had any luck using view box etc as it removes the mask, I am also trying to position the shadow to the bottom right of the circle, but again I am having trouble making it responsive.
Any help would be greatly appreciated.
svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 1000" preserveAspectRatio="xMidYMin slice">
<defs>
<mask id="mask" x="0" y="0">
<rect x="0" y="0" height="100%" width="100%" fill="#fff"/>
<circle cx="50%" cy="50%" r="250" />
</mask>
<pattern id="img" patternUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<image xlink:href="https://images.unsplash.com/photo-1507181179506-598491b53db4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=299b6fae13eb39086f5bb28029c61760&auto=format&fit=crop&w=1778&q=80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
</pattern>
</defs>
<path id="Shadow" d="M462.231,0c19.593,38.355,29.045,88.448,36.926,138.3,9.125,75.59-104.323,237.333-194.755,250.24C246.323,389.921,51.569,371.964,0,313.148c46.559,91.147,141.283,153.59,250.655,153.59,155.395,0,281.365-125.97,281.365-281.365A280.22,280.22,0,0,0,462.231,0" opacity="0.2" />
<rect width="100%" height="100%" mask="url(#mask)" fill-opacity="1" fill="url(#img)" />
</svg>

Putting the path inside a g container allowed me to scale the shadow relative to the mask, hope this helps someone in the future.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0">
<rect x="0" y="0" height="100%" width="100%" fill="#fff"/>
<circle cx="50%" cy="50%" r="16.5%" />
</mask>
<pattern id="img" patternUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
<image xlink:href="https://images.unsplash.com/photo-1507181179506-598491b53db4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=299b6fae13eb39086f5bb28029c61760&auto=format&fit=crop&w=1778&q=80" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
</pattern>
</defs>
<g>
<path id="Shadow" d="m 462.231 0 c 19.593 38.355 29.045 88.448 36.926 138.3 c 9.125 75.59 -104.323 237.333 -194.755 250.24 c -58.079 1.381 -252.833 -16.576 -304.402 -75.392 c 46.559 91.147 141.283 153.59 250.655 153.59 c 155.395 0 281.365 -125.97 281.365 -281.365 a 280.22 280.22 0 0 0 -69.789 -185.373" opacity="0.2" style="transform: scale(0.3) translate(579px, 650px);" />
<rect width="100%" height="100%" mask="url(#mask)" fill-opacity="1" fill="url(#img)" />
</g>
</svg>

Firefox, Chrome: svg mask is missing in sprite symbol

everyone!
I have some SVG image with mask (for expamle):
<svg width="173" height="173" viewBox="0 0 173 173" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask0_42_56" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="65" width="50" height="43">
<rect x="61" y="65" width="50" height="43" rx="12" fill="#C4C4C4"/>
</mask>
</defs>
<rect width="173" height="173" rx="16" fill="#F2F3F7"/>
<g opacity="0.5">
<g mask="url(#mask0_42_56)">
<rect x="61" y="65" width="50" height="43" rx="0" fill="#C4C4C4"/>
<path d="M100.062 80.3574C102.651 80.3574 104.75 78.2947 104.75 75.7502C104.75 73.2058 102.651 71.1431 100.062 71.1431C97.4736 71.1431 95.3749 73.2058 95.3749 75.7502C95.3749 78.2947 97.4736 80.3574 100.062 80.3574Z"
fill="#6C6C6C"/>
<path d="M99.3574 90.5753C98.0109 89.2622 95.8359 89.2336 94.4531 90.5101L82.875 101.207V111.071H108.656C109.951 111.071 111 110.048 111 108.786V101.929L99.3574 90.5753Z"
fill="#6C6C6C"/>
<path d="M104.75 111.071L78.0929 84.4931C76.6965 83.1008 74.441 83.0706 73.0069 84.424L61 95.7654V108.648C61 109.987 62.0877 111.071 63.4306 111.071H104.75Z"
fill="#6C6C6C"/>
</g>
</g>
</svg>
I wanna bundle all of svg images on my project in one svg-sprite. I use simple gulp script for this, a lot of images displayed correctly. But images who contain mask displayed without mask. Mask id and attributes with using mask id match. The root of the incorrect display just in than symbol doesn't see mask with this id.
I have solution for Firefox. Move mask tag with chilren from symbol tag in parent svg tag.
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="ara" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="61" y="65" width="50" height="43">
<rect x="61" y="65" width="50" height="43" rx="12" fill="#C4C4C4"/>
</mask>
</defs>
<symbol fill="none" viewBox="0 0 173 173" id="empty-cover" xmlns="http://www.w3.org/2000/svg">
<rect width="173" height="173" rx="16" fill="#F2F3F7"/>
<g mask="url(#ara)" opacity="0.5">
<rect x="61" y="65" width="50" height="43" rx="0" fill="#C4C4C4"/>
<path d="M100.062 80.357c2.589 0 4.688-2.062 4.688-4.607 0-2.544-2.099-4.607-4.688-4.607-2.588 0-4.687 2.063-4.687 4.607 0 2.545 2.099 4.607 4.687 4.607zM99.357 90.575a3.582 3.582 0 00-4.904-.065l-11.578 10.697v9.864h25.781c1.295 0 2.344-1.023 2.344-2.285v-6.857L99.357 90.575z"
fill="#6C6C6C"/>
<path d="M104.75 111.071L78.093 84.493a3.656 3.656 0 00-5.086-.069L61 95.765v12.883a2.426 2.426 0 002.43 2.423h41.32z"
fill="#6C6C6C"/>
</g>
</symbol>
This solution doesn't work for Chrome.
I tried to move mask to parent tag like in Firefox solution.
And I tried put mask to both places: root svg tag and symbol.

Filling multiple patterns into different parts of paths in a single svg

I have a big piece of svg image with different parts coded into html. I wanted to fill each of my paths with different individuals images of my own using the pattern tag but the space inside the path remain empty. I have tried changing the fill="url(#image1)" to fill="red" and it does changes to red but when I change it back it remains empty. I'm not sure if it is the viewbox that is messing with the image and I am not familiar with viewbox. I already referred to SVG image inside circle but still cant get any idea why it isn't working. The svg is made using Adobe Illustrator.
(Changes Done)
Tried using localhost http-server and still having the same results(bank space inside paths).
<!DOCTYPE html>
<html>
<head>
<title>Custom_pie_pattern</title>
</head>
<body>
<svg viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" >
<defs>
<pattern id="image1" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\1-image.png"></image>
</pattern>
<pattern id="image2" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\2-image.png"></image>
</pattern>
<pattern id="image3" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\3-image.png"></image>
</pattern>
<pattern id="image4" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\4-image.png"></image>
</pattern>
<pattern id="image5" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\5-image.png"></image>
</pattern>
<pattern id="image6" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\6-image.png"></image>
</pattern>
<pattern id="image7" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\7-image.png"></image>
</pattern>
<pattern id="image8" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\8-image.png"></image>
</pattern>
<pattern id="image9" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" xlink:href="C:\Users\ACER\Desktop\Image_test\9-image.png"></image>
</pattern>
</defs>
<g id="outer">
<circle class="st0" cx="999" cy="599" r="179.5" fill="none"/>
<path d="M999,420c24.17,0,47.61,4.73,69.67,14.07c21.32,9.02,40.46,21.92,56.9,38.36c16.44,16.44,29.35,35.58,38.36,56.9
c9.33,22.07,14.07,45.51,14.07,69.67s-4.73,47.61-14.07,69.67c-9.02,21.32-21.92,40.46-38.36,56.9
c-16.44,16.44-35.58,29.35-56.9,38.36C1046.61,773.27,1023.17,778,999,778s-47.61-4.73-69.67-14.07
c-21.32-9.02-40.46-21.92-56.9-38.36c-16.44-16.44-29.35-35.58-38.36-56.9C824.73,646.61,820,623.17,820,599
s4.73-47.61,14.07-69.67c9.02-21.32,21.92-40.46,38.36-56.9c16.44-16.44,35.58-29.35,56.9-38.36C951.39,424.73,974.83,420,999,420
M999,419c-99.41,0-180,80.59-180,180s80.59,180,180,180s180-80.59,180-180S1098.41,419,999,419L999,419z"/>
</g>
<g id="pie9">
<path class="st0" d="M896.52,476.37c27.43-22.91,62.19-35.64,97.98-35.87v101.04c-11.95,0.44-23.49,4.96-32.55,12.78L896.52,476.37
z" fill="url(image9)"/>
<path d="M994,441.01v100.06c-11.72,0.53-23.02,4.97-31.99,12.56l-64.78-77.19c13.33-11.06,28.27-19.73,44.43-25.76
C958.39,444.43,975.99,441.18,994,441.01 M995,440c-37.77,0.12-72.35,13.75-99.18,36.31l0.21,0.25l65.86,78.48
c0.09-0.09,0.19-0.18,0.29-0.25c8.85-7.67,20.28-12.42,32.82-12.76V440L995,440z"/>
</g>
<g id="pie8">
<path class="st0" d="M841.98,568.27c6.36-35.09,24.91-67.12,52.28-90.25l65.22,77.72c-8.92,7.84-15,18.57-17.13,30.24
L841.98,568.27z" fill="url(image8)"/>
<path d="M894.2,478.72l64.58,76.96c-8.7,7.79-14.65,18.3-16.83,29.71l-99.39-17.52C848.95,533.27,867.25,501.67,894.2,478.72
M894.32,477.31c-0.1,0.08-0.19,0.16-0.29,0.25c-27.06,22.84-46.17,54.79-52.63,91.12l0.97,0.17l100.39,17.7
c0.01-0.06,0.02-0.12,0.03-0.17c2.11-12.02,8.3-22.63,17.1-30.34c0.09-0.09,0.19-0.18,0.29-0.25L894.32,477.31L894.32,477.31z"/>
</g>
<g id="pie7">
<path class="st0" d="M859.6,676.24c-13.15-23.12-20.1-49.47-20.1-76.24c0-8.98,0.78-17.98,2.31-26.74l99.41,17.53
c-0.47,2.87-0.71,5.8-0.71,8.71c0,9.15,2.37,18.15,6.85,26.07L859.6,676.24z" fill="url(image7)"/>
<path d="M842.21,573.84l98.43,17.35c-0.43,2.73-0.64,5.52-0.64,8.31c0,9.07,2.3,18,6.67,25.88l-86.89,50.17
C846.84,652.61,840,626.51,840,600C840,591.22,840.74,582.42,842.21,573.84 M841.4,572.68c-0.01,0.06-0.02,0.11-0.03,0.17
c-1.56,8.82-2.37,17.89-2.37,27.15c0,27.99,7.42,54.25,20.41,76.92l88.62-51.17c-4.47-7.72-7.03-16.68-7.03-26.25
c0-3.05,0.26-6.04,0.76-8.95c0.01-0.06,0.02-0.12,0.03-0.17L841.4,572.68L841.4,572.68z"/>
</g>
<g id="pie6">
<path class="st0" d="M942.07,747.83c-33.62-12.52-61.99-36.55-79.98-67.72l87.76-50.67c6.16,10.43,15.74,18.46,27.05,22.71
L942.07,747.83z" fill="url(image6)"/>
<path d="M949.67,630.11c6.14,10.18,15.52,18.05,26.59,22.32l-34.49,94.75c-33.15-12.47-61.14-36.17-79-66.9L949.67,630.11
M950.03,628.75l-88.62,51.17c17.97,31.38,46.6,55.88,80.96,68.55l35.17-96.63C965.89,647.6,956.16,639.35,950.03,628.75
L950.03,628.75z"/>
</g>
<g id="pie5">
<path class="st0" d="M999,758.5c-18.21,0-36.03-3.14-52.99-9.33l34.83-95.69c5.64,2,11.58,3.02,17.66,3.02
c5.9,0,11.7-0.96,17.23-2.87c0.14-0.05,0.29-0.1,0.43-0.15l34.94,96.01C1034.42,755.47,1016.89,758.5,999,758.5z" fill="url(image5)"/>
<path d="M981.14,654.11c5.56,1.92,11.39,2.89,17.36,2.89c5.95,0,11.79-0.97,17.36-2.88l34.6,95.07
c-16.49,5.85-33.79,8.81-51.46,8.81c-17.98,0-35.59-3.07-52.35-9.13L981.14,654.11 M1016.46,652.84c-0.29,0.11-0.59,0.22-0.89,0.32
c-5.35,1.84-11.09,2.84-17.07,2.84c-6.31,0-12.36-1.11-17.96-3.16l-35.17,96.63c16.71,6.16,34.78,9.53,53.63,9.53
c18.52,0,36.28-3.25,52.74-9.21l-0.12-0.33L1016.46,652.84L1016.46,652.84z"/>
</g>
<g id="pie4">
<path class="st0" d="M1019.21,652.46c0.14-0.05,0.29-0.1,0.42-0.16c11.31-4.11,20.99-12.08,27.25-22.44c0,0,0-0.01,0.01-0.01
l87.76,50.68c-18.09,31.12-46.55,55.06-80.21,67.46c-0.14,0.06-0.28,0.11-0.41,0.16L1019.21,652.46z" fill="url(image4)"/>
<path d="M1047.07,630.53l86.9,50.18c-18.02,30.77-46.25,54.46-79.64,66.78l-34.48-94.74
C1031.12,648.66,1040.77,640.76,1047.07,630.53 M1046.72,629.18c-0.09,0.15-0.17,0.29-0.26,0.43c-6.15,10.18-15.66,18.11-27,22.23
c-0.29,0.11-0.59,0.22-0.89,0.32l35.17,96.63c0.29-0.11,0.59-0.21,0.88-0.33c34.21-12.6,62.73-36.93,80.72-68.11l-0.75-0.43
L1046.72,629.18L1046.72,629.18z"/>
</g>
<g id="pie3">
<path class="st0" d="M1049.15,626.43c4.81-8.13,7.35-17.44,7.35-26.93c0-3.04-0.26-6.09-0.77-9.05l98.43-17.36
c1.55,8.81,2.33,17.86,2.33,26.91c0,26.92-7.03,53.43-20.34,76.67L1049.15,626.43z" fill="url(image3)"/>
<path d="M1153.76,573.67c1.49,8.62,2.24,17.48,2.24,26.33c0,26.67-6.92,52.93-20.03,75.98l-86.14-49.73
c4.69-8.1,7.16-17.34,7.16-26.75c0-2.91-0.23-5.81-0.7-8.65L1153.76,573.67 M1154.57,572.51l-99.42,17.53
c0.56,3.07,0.85,6.23,0.85,9.46c0,9.74-2.66,18.87-7.28,26.68c-0.09,0.15-0.17,0.29-0.26,0.43l87.88,50.74
c0.08-0.14,0.16-0.29,0.25-0.43c12.98-22.66,20.41-48.93,20.41-76.92C1157,590.62,1156.17,581.43,1154.57,572.51L1154.57,572.51z"
/>
</g>
<g id="pie2">
<path class="st0" d="M1054.55,586.46c-2.36-12.26-9.01-23.32-18.78-31.21l64.38-76.74c27.67,23.18,46.4,55.32,52.84,90.59
L1054.55,586.46z" fill="url(image2)"/>
<path d="M1100.21,479.22c27.22,22.95,45.72,54.67,52.2,89.48l-97.46,17.18c-2.43-12.02-8.95-22.86-18.47-30.7L1100.21,479.22
M1100.09,477.81l-65.03,77.51c0.1,0.08,0.2,0.16,0.29,0.24c9.64,7.74,16.49,18.82,18.8,31.48l99.42-17.53
c-6.54-36.52-25.86-68.6-53.19-91.45C1100.29,477.97,1100.19,477.89,1100.09,477.81L1100.09,477.81z"/>
</g>
<g id="pie1">
<path class="st0" d="M1033.28,552.86c-9.42-7.43-20.75-11.36-32.78-11.36c-0.33,0-0.67,0-1,0.01V440.5
c35.88,0,70.79,12.56,98.38,35.37L1033.28,552.86z" fill="url(image1)"/>
<path d="M1000,441c18.14,0.06,35.88,3.24,52.76,9.46c16.14,5.95,31.08,14.52,44.42,25.48l-63.96,76.23
c-9.43-7.31-20.73-11.17-32.71-11.17c-0.17,0-0.33,0-0.5,0V441 M999.5,440H999v102.03c0.5-0.02,1-0.03,1.5-0.03
c12.3,0,23.61,4.23,32.56,11.32c0.1,0.08,0.2,0.16,0.29,0.24l65.03-77.5l0.21-0.25C1071.73,453.45,1037.18,440,999.5,440L999.5,440
z"/>
</g>
<g id="inner">
<circle class="st0" cx="998.5" cy="598.5" r="57" fill="none"/>
<path d="M998.5,542c31.15,0,56.5,25.35,56.5,56.5s-25.35,56.5-56.5,56.5S942,629.65,942,598.5S967.35,542,998.5,542 M998.5,541
c-31.76,0-57.5,25.74-57.5,57.5s25.74,57.5,57.5,57.5s57.5-25.74,57.5-57.5S1030.26,541,998.5,541L998.5,541z"/>
</g>
</svg>
</body>
</html>
(Using the clipPath method)
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<defs>
<clipPath id="outer">
<circle class="st0" cx="999" cy="599" r="179.5"/>
<path d="M999,420c24.17,0,47.61,4.73,69.67,14.07c21.32,9.02,40.46,21.92,56.9,38.36c16.44,16.44,29.35,35.58,38.36,56.9
c9.33,22.07,14.07,45.51,14.07,69.67s-4.73,47.61-14.07,69.67c-9.02,21.32-21.92,40.46-38.36,56.9
c-16.44,16.44-35.58,29.35-56.9,38.36C1046.61,773.27,1023.17,778,999,778s-47.61-4.73-69.67-14.07
c-21.32-9.02-40.46-21.92-56.9-38.36c-16.44-16.44-29.35-35.58-38.36-56.9C824.73,646.61,820,623.17,820,599
s4.73-47.61,14.07-69.67c9.02-21.32,21.92-40.46,38.36-56.9c16.44-16.44,35.58-29.35,56.9-38.36C951.39,424.73,974.83,420,999,420
z"/>
</clipPath>
<clipPath id="pie9">
<path class="st0" d="M896.52,476.37c27.43-22.91,62.19-35.64,97.98-35.87v101.04c-11.95,0.44-23.49,4.96-32.55,12.78L896.52,476.37
z"/>
<path d="M994,441.01v100.06c-11.72,0.53-23.02,4.97-31.99,12.56l-64.78-77.19c13.33-11.06,28.27-19.73,44.43-25.76
C958.39,444.43,975.99,441.18,994,441.01 z"/>
</clipPath>
<clipPath id="pie8">
<path class="st0" d="M841.98,568.27c6.36-35.09,24.91-67.12,52.28-90.25l65.22,77.72c-8.92,7.84-15,18.57-17.13,30.24
L841.98,568.27z"/>
<path d="M894.2,478.72l64.58,76.96c-8.7,7.79-14.65,18.3-16.83,29.71l-99.39-17.52C848.95,533.27,867.25,501.67,894.2,478.72
z"/>
</clipPath>
<clipPath id="pie7">
<path class="st0" d="M859.6,676.24c-13.15-23.12-20.1-49.47-20.1-76.24c0-8.98,0.78-17.98,2.31-26.74l99.41,17.53
c-0.47,2.87-0.71,5.8-0.71,8.71c0,9.15,2.37,18.15,6.85,26.07L859.6,676.24z"/>
<path d="M842.21,573.84l98.43,17.35c-0.43,2.73-0.64,5.52-0.64,8.31c0,9.07,2.3,18,6.67,25.88l-86.89,50.17
C846.84,652.61,840,626.51,840,600C840,591.22,840.74,582.42,842.21,573.84 z"/>
</clipPath>
<clipPath id="pie6">
<path class="st0" d="M942.07,747.83c-33.62-12.52-61.99-36.55-79.98-67.72l87.76-50.67c6.16,10.43,15.74,18.46,27.05,22.71
L942.07,747.83z"/>
<path d="M949.67,630.11c6.14,10.18,15.52,18.05,26.59,22.32l-34.49,94.75c-33.15-12.47-61.14-36.17-79-66.9L949.67,630.11
z"/>
</clipPath>
<clipPath id="pie5">
<path class="st0" d="M999,758.5c-18.21,0-36.03-3.14-52.99-9.33l34.83-95.69c5.64,2,11.58,3.02,17.66,3.02
c5.9,0,11.7-0.96,17.23-2.87c0.14-0.05,0.29-0.1,0.43-0.15l34.94,96.01C1034.42,755.47,1016.89,758.5,999,758.5z"/>
<path d="M981.14,654.11c5.56,1.92,11.39,2.89,17.36,2.89c5.95,0,11.79-0.97,17.36-2.88l34.6,95.07
c-16.49,5.85-33.79,8.81-51.46,8.81c-17.98,0-35.59-3.07-52.35-9.13L981.14,654.11 z"/>
</clipPath>
<clipPath id="pie4">
<path class="st0" d="M1019.21,652.46c0.14-0.05,0.29-0.1,0.42-0.16c11.31-4.11,20.99-12.08,27.25-22.44c0,0,0-0.01,0.01-0.01
l87.76,50.68c-18.09,31.12-46.55,55.06-80.21,67.46c-0.14,0.06-0.28,0.11-0.41,0.16L1019.21,652.46z"/>
<path d="M1047.07,630.53l86.9,50.18c-18.02,30.77-46.25,54.46-79.64,66.78l-34.48-94.74
C1031.12,648.66,1040.77,640.76,1047.07,630.53 z"/>
</clipPath>
<clipPath id="pie3">
<path class="st0" d="M1049.15,626.43c4.81-8.13,7.35-17.44,7.35-26.93c0-3.04-0.26-6.09-0.77-9.05l98.43-17.36
c1.55,8.81,2.33,17.86,2.33,26.91c0,26.92-7.03,53.43-20.34,76.67L1049.15,626.43z"/>
<path d="M1153.76,573.67c1.49,8.62,2.24,17.48,2.24,26.33c0,26.67-6.92,52.93-20.03,75.98l-86.14-49.73
c4.69-8.1,7.16-17.34,7.16-26.75c0-2.91-0.23-5.81-0.7-8.65L1153.76,573.67z"
/>
</clipPath>
<clipPath id="pie2">
<path class="st0" d="M1054.55,586.46c-2.36-12.26-9.01-23.32-18.78-31.21l64.38-76.74c27.67,23.18,46.4,55.32,52.84,90.59
L1054.55,586.46z"/>
<path d="M1100.21,479.22c27.22,22.95,45.72,54.67,52.2,89.48l-97.46,17.18c-2.43-12.02-8.95-22.86-18.47-30.7L1100.21,479.22
z"/>
</clipPath>
<clipPath id="pie1">
<path class="st0" d="M1033.28,552.86c-9.42-7.43-20.75-11.36-32.78-11.36c-0.33,0-0.67,0-1,0.01V440.5
c35.88,0,70.79,12.56,98.38,35.37L1033.28,552.86z"/>
<path d="M1000,441c18.14,0.06,35.88,3.24,52.76,9.46c16.14,5.95,31.08,14.52,44.42,25.48l-63.96,76.23
c-9.43-7.31-20.73-11.17-32.71-11.17c-0.17,0-0.33,0-0.5,0V441
z"/>
</clipPath>
<clipPath id="inner">
<circle class="st0" cx="998.5" cy="598.5" r="57" fill="#00FFFF"/>
<path d="M998.5,542c31.15,0,56.5,25.35,56.5,56.5s-25.35,56.5-56.5,56.5S942,629.65,942,598.5S967.35,542,998.5,542z"/>
</clipPath>
</defs>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\1-image.png" clip-path="url(#pie9)"></image>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\2-image.png" clip-path="url(#pie8)"></image>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\3-image.png" clip-path="url(#pie7)"></image>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\4-image.png" clip-path="url(#pie6)"></image>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\5-image.png" clip-path="url(#pie5)"></image>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\6-image.png" clip-path="url(#pie4)"></image>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\7-image.png" clip-path="url(#pie3)"></image>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\8-image.png" clip-path="url(#pie2)"></image>
<image x="0" y="0" width="100%" height="100%" xlink:href="C:\Users\ACER\Desktop\Image_test\9-image.png" clip-path="url(#pie1)"></image>
</svg>

The problem are your paths, the way the paths are drawn. Every path have a hole in the middle so you'll not be able to see the image
In the next example instead of using a pattern to fill the path I'm using the path as a clipping path for the image. The result is this: The thin border you can see is the clipped image
<svg viewBox="0 0 1920 1080">
<defs>
<clipPath id="cp">
<path d="M1100.21,479.22c27.22,22.95,45.72,54.67,52.2,89.48l-97.46,17.18c-2.43-12.02-8.95-22.86-18.47-30.7L1100.21,479.22
M1100.09,477.81l-65.03,77.51c0.1,0.08,0.2,0.16,0.29,0.24c9.64,7.74,16.49,18.82,18.8,31.48l99.42-17.53
c-6.54-36.52-25.86-68.6-53.19-91.45C1100.29,477.97,1100.19,477.89,1100.09,477.81L1100.09,477.81z"/>
</clipPath>
</defs>
<image x="1035" y="477" width="512" height="512" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" clip-path="url(#cp)"></image>
</svg>
In order to make it work you need to rewrite the paths by removing everything from the second move to command:
path{stroke-width:15px}
<svg viewBox="0 0 1920 1080">
<defs>
<clipPath id="cp">
<path id="thePath" d="M1100.21,479.22c27.22,22.95,45.72,54.67,52.2,89.48l-97.46,17.18c-2.43-12.02-8.95-22.86-18.47-30.7L1100.21,479.22
z"/>
</clipPath>
</defs>
<image x="1035" y="477" width="512" height="512" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" clip-path="url(#cp)"></image>
<!--Using the path and add a stroke. You can set the stroke's width in CSS-->
<use xlink:href="#thePath" fill="none" stroke="skyBlue" />
</svg>
Observation: for a simpler d attribute you can draw those paths programmatically like so: How to make a "bent rectangle" in SVG?

SVG circle with image inside not working on mobile

I have code
<svg class="circle-chart in-view" version="1.1" viewBox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle class="circle-chart-background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
<defs>
<pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
<image xlink:href="/hoangnguyenwp/wp-content/themes/hoangnguyenwp/images/web-shop.png" x="50%" y="50%" height="32" width="32" transform="translate(-35.5,-31)"></image>
</pattern>
</defs>
<circle class="circle-chart-circle circle-shop" stroke="#E91E63" stroke-width="2" stroke-linecap="round" fill="url(#image2)" cx="16.91549431" cy="16.91549431" r="15.91549431"></circle>
</svg>
with image inside circle
<defs>
<pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
<image xlink:href="/hoangnguyenwp/wp-content/themes/hoangnguyenwp/images/web-shop.png" x="50%" y="50%" height="32" width="32" transform="translate(-35.5,-31)"></image>
</pattern>
</defs>
but on mobile it's not show image
What's wrong with my code ?

No display of image as a pattern in SVG circle

I'm trying to display an image in an svg circle in the context of an html page with the following lines :
<html>
<head>
</head>
<body>
<svg width="260" height="120">
<defs>
<pattern id="Triangle"
width="10" height="10"
patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10"/>
</pattern>
<pattern id=Img"
width="100" height="100"
patternUnits="userSpaceOnUse">
<image x="0" y="0"
width="100%" height="100%"
xlink:href="corruscant.jpg"></image>
</pattern>
</defs>
<circle cx="60" cy="60" r="60"
fill="url(#Img)"
stroke="red"/>
<circle cx="200" cy="60" r="60"
fill="url(#Triangle)"
stroke="red"/>
</svg>
</body>
</html>
This 'should' work according to what I read on many documentations/examples/posts such as :
Add a background image (.png) to a SVG circle shape
SVG image inside circle
http://jsfiddle.net/UI_Designer/njr4fdhq/2/
But it doesn't. Triangles appear in the second circle, so svg structure is ok I guess..
I've tried to copy/paste the jsfiddle example but the landscape does not show itself.
I'm looking for elements that my naïve approach has not taken in account.
Thanks

<svg width="260" height="120">
<defs>
<pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10" />
</pattern>
<pattern id="Img" width="100" height="100" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/46/A_Meat_Stall_with_the_Holy_Family_Giving_Alms_-_Pieter_Aertsen_-_Google_Cultural_Institute.jpg"></image>
</pattern>
</defs>
<circle cx="60" cy="60" r="60" fill="url(#Img)" stroke="red" />
<circle cx="200" cy="60" r="60" fill="url(#Triangle)" stroke="red" />
</svg>