Filling multiple patterns into different parts of paths in a single svg - html
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?
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>
how to mask an svg shape to an svg image
So basically I have a triangular shape and I want to mask it in an image/gif. <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/> </svg> <div class="clipSvg2"> <svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="mask11"> <!-- <svg width="209" height="143" viewBox="0 0 209 143" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="black"/> </svg> --> </mask> </defs> //Here add some mask=url(#mask11) <image width="100%" height="100%" xlink:href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU"></image> </svg> </div> As you see I'm trying to mask the mask11 in my image but I can't do that..I've search a lot here and its not really working I don't know how or what to do about it can anyone help me? Thanks a lot.
I'm not sure what it should look like, but here are two examples. The first uses a clip-path. With the clip-rule="evenodd" it is only the "frame" that shows. The second is a mask. In the mask the path has a white fill – that is what makes the image show. In both cases I made the viewBox the same aspect ratio as the image to make the image take up the entire space of the SVG. <svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="cp1"> <path clip-rule="evenodd" d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" /> </clipPath> </defs> <image width="100%" height="100%" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU" clip-path="url(#cp1)"/> </svg> <svg width="300" viewBox="0 0 284 178" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="m1"> <path d="M104.5 0L0.143921 142.5H208.856L104.5 0ZM104.5 10.1551L11.9747 136.5H197.025L104.5 10.1551Z" fill="white"/> </mask> </defs> <image width="100%" height="100%" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQU69UnQwUGs3VTS51AEM2MRTHED0PRl0rMLVw3hdS_95xNdTPqY5_7E3N-pzgp49lrdkY&usqp=CAU" mask="url(#m1)"/> </svg>
SVG in img fix for IE breaks Chrome
So I made an SVG for a very svg-friendly-design logo in my recent website. More as a "ah this is cool" than an absolute necessity, but now that it's not working I'm obsessed. I dropped it in an <img /> tag, sized it up as I like, and bam sweet logo, used in different sizes in a couple of places, scales beautifully. Ah the miracles of modern web. Remember .PNG fixes? We have come a long way in a few short years. I'm so happy we no longer have to deal with that archaic IE bullsh... Oh, you've got to be kidding me! So apparently IE gets funky. Alright, google this thing. "Remove height and width attributes." Fantastic, do that... Chrome starts having the same issue with the modified file. Argh. What am I doing wrong? <svg width="264" height="264" xmlns="http://www.w3.org/2000/svg"> <g> <title>background</title> <rect x="-1" y="-1" width="266" height="266" id="canvas_background" fill="none"/> <g id="canvasGrid" display="none"> <rect id="svg_1" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/> </g> </g> <g> <title>Layer 1</title> <ellipse fill="#000000" stroke-width="0" cx="132.081358" cy="132.179138" id="svg_3" rx="132" ry="132" stroke="#fff"/> <ellipse fill="#000000" stroke="#fff" stroke-width="6" cx="132.081346" cy="132.17914" id="svg_5" rx="126" ry="126"/> <ellipse fill="#000000" stroke="#fff" stroke-width="7" cx="132.081365" cy="213.774884" id="svg_13" rx="44" ry="44"/> <line fill="none" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="12.496805" y1="168.812302" x2="251.665903" y2="168.812302" id="svg_24" stroke-linejoin="null" stroke-linecap="null" stroke="#fff"/> <ellipse fill="#d80202" stroke="#fff" stroke-width="7" cx="132.081369" cy="50.410766" id="svg_6" rx="44" ry="44"/> <line fill="none" stroke="#fff" stroke-width="7" stroke-opacity="null" fill-opacity="null" x1="132.08135" y1="95.543239" x2="132.08135" y2="166.831116" id="svg_26" stroke-linejoin="null" stroke-linecap="null"/> </g> </svg>
Try use one of these SVG's and adjust the to make it responsive remove the height and width attrubite from the <svg> tag.
The first one has the style inline and the second has it in <style> tag.
code:
<?xml version="1.0" encoding="utf-8"?>
<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 264 264" style="enable-background:new 0 0 264 264;" xml:space="preserve" width="100" height="100">
<g>
<title>background</title>
<rect id="canvas_background" x="-1" y="-1" style="fill:none;" width="266" height="266"/>
<g id="canvasGrid" style="display:none;">
<rect id="svg_1" style="display:inline;fill:none;" width="264" height="264"/>
</g>
</g>
<g>
<title>Layer 1</title>
<ellipse id="svg_3" cx="132.1" cy="132.2" rx="132" ry="132"/>
<ellipse id="svg_5" style="stroke:#FFFFFF;stroke-width:6;" cx="132.1" cy="132.2" rx="126" ry="126"/>
<ellipse id="svg_13" style="stroke:#FFFFFF;stroke-width:7;" cx="132.1" cy="213.8" rx="44" ry="44"/>
<line id="svg_24" style="fill:none;stroke:#FFFFFF;stroke-width:7;" x1="12.5" y1="168.8" x2="251.7" y2="168.8"/>
<ellipse id="svg_6" style="fill:#D80202;stroke:#FFFFFF;stroke-width:7;" cx="132.1" cy="50.4" rx="44" ry="44"/>
<line id="svg_26" style="fill:none;stroke:#FFFFFF;stroke-width:7;" x1="132.1" y1="95.5" x2="132.1" y2="166.8"/>
</g>
</svg>
<br />
<br />
<?xml version="1.0" encoding="utf-8"?>
<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 264 264" style="enable-background:new 0 0 264 264;" xml:space="preserve" width="100" height="100">
<style type="text/css">
.st0{fill:none;}
.st1{display:none;}
.st2{display:inline;fill:none;}
.st3{stroke:#FFFFFF;stroke-width:6;}
.st4{stroke:#FFFFFF;stroke-width:7;}
.st5{fill:none;stroke:#FFFFFF;stroke-width:7;}
.st6{fill:#D80202;stroke:#FFFFFF;stroke-width:7;}
</style>
<g>
<rect id="canvas_background" x="-1" y="-1" class="st0" width="266" height="266"/>
<g id="canvasGrid" class="st1">
<rect id="svg_1" class="st2" width="264" height="264"/>
</g>
</g>
<g>
<ellipse id="svg_3" cx="132.1" cy="132.2" rx="132" ry="132"/>
<ellipse id="svg_5" class="st3" cx="132.1" cy="132.2" rx="126" ry="126"/>
<ellipse id="svg_13" class="st4" cx="132.1" cy="213.8" rx="44" ry="44"/>
<line id="svg_24" class="st5" x1="12.5" y1="168.8" x2="251.7" y2="168.8"/>
<ellipse id="svg_6" class="st6" cx="132.1" cy="50.4" rx="44" ry="44"/>
<line id="svg_26" class="st5" x1="132.1" y1="95.5" x2="132.1" y2="166.8"/>
</g>
</svg>
SVG filter on inline symbol
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>
How to hide clipPath in IE
I want to hide the clipPath element so it doesn't show empty white space in the browser, but I still want to be able to use it from other svgs, like the image. If I put width 0 and height 0 on it then IE won't show the image either. If I put display:none the image doesn't show up in any browser. <svg height="0" width="0" viewBox="0 0 400 400"> <defs> <clipPath id="svgPath"> <circle fill="#FFFFFF" cx="50%" cy="50%" r="200" /> </clipPath> </defs> </svg> <svg width="400" height="400" viewBox="0 0 400 400"> <image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" /> </svg> Any ideas?
Put it in the same SVG as the image and there's nothing to hide. <svg width="400" height="400" viewBox="0 0 400 400"> <defs> <clipPath id="svgPath"> <circle fill="#FFFFFF" cx="50%" cy="50%" r="200" /> </clipPath> </defs> <image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" /> </svg>