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

Question

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>

image href attributes must be URLs not filenames of files on a disk. — Robert Longson, Apr 28 '20 at 07:00
I had tried any random pictures online and still not working. — Raymond Chong, Apr 28 '20 at 07:07
Use something like https://www.npmjs.com/package/http-server for local development (or any other local server, whatever suits your needs) — cloned, Apr 28 '20 at 07:09
Tried it with local host again and still not working. And tried to place the images same folder as the html also not working. — Raymond Chong, Apr 28 '20 at 07:13

enxaneta · Accepted Answer · 2020-04-28T08:57:44.213

1

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?

edited Apr 28 '20 at 08:57

answered Apr 28 '20 at 07:19

enxaneta

31,608
5
29
42

Can you please explain more on how should i rewrite the paths? – Raymond Chong Apr 28 '20 at 07:30
As mentiones in my answer the best way would be programmatically. However if you want to use the paths you have you need to search for the second move to command and delete everything from that point on. for example this: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 **M**1100.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 – enxaneta Apr 28 '20 at 07:36
would become this: 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 keeping the close path command z at the end – enxaneta Apr 28 '20 at 07:37
It works when i remove the second move to command but my strokes is gone and i could not make it thicker with css. Why is this so? – Raymond Chong Apr 28 '20 at 08:19
It's because I'm using the path as a clipping path meaning that you actually don't draw the path. If you need the stroke you need to draw the path. Try adding `` where `thePath` is the `id` of the path you want to use.. – enxaneta Apr 28 '20 at 08:38
Does it means i need to undo what i had removed then add the line? – Raymond Chong Apr 28 '20 at 08:42
Please take a look at the second example of my answer – enxaneta Apr 28 '20 at 08:55

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

1 Answers1