Html 将多个模式填充到单个svg中路径的不同部分
我有一大块svg图像，不同部分编码成html。我想使用pattern标记用我自己的不同个人图像填充我的每个路径，但是路径中的空间仍然是空的。我尝试将fill=“url（#image1）”更改为fill=“red”，它确实会更改为红色，但当我将其更改回时，它仍然为空。我不确定是否是viewbox干扰了图像，我对viewbox不熟悉。我已经提到了，但仍然不知道为什么它不起作用。svg是使用Adobe Illustrator制作的 （已完成更改） 尝试使用localhost http服务器，但仍然有相同的结果（路径中的银行空间）Html 将多个模式填充到单个svg中路径的不同部分,html,svg,Html,Svg,我有一大块svg图像，不同部分编码成html。我想使用pattern标记用我自己的不同个人图像填充我的每个路径，但是路径中的空间仍然是空的。我尝试将fill=“url（#image1）”更改为fill=“red”，它确实会更改为红色，但当我将其更改回时，它仍然为空。我不确定是否是viewbox干扰了图像，我对viewbox不熟悉。我已经提到了，但仍然不知道为什么它不起作用。svg是使用Adobe Illustrator制作的 （已完成更改） 尝试使用localhost http服务器，但仍然有相
自定义饼图
问题在于你的路径，路径的绘制方式。每一条路中间都有一个洞，所以你看不到图像 在下一个示例中，我使用路径作为图像的剪切路径，而不是使用图案填充路径。结果是：您可以看到的薄边框是剪裁后的图像
`其中路径
是要使用的路径的id
。。
<!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>
<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>