如何用两条闭合线正确填充一条SVG路径?

时间:2018-04-12 09:50:56

标签: svg fill

我的SVG文件包含一个路径和 d 属性中的两行。它有有效的填充,看起来像这样

enter image description here

您可以在此处查看此svg文件的来源img1.svg

我改变了这个svg的一行,我使符号变粗。更改后,它看起来像这样

enter image description here

它的填充错误。

您可以在此处查看此svg文件的来源img2.svg

第二个文件填写无效的原因是什么?

1 个答案:

答案 0 :(得分:2)

为了使内圈没有染色,你需要写fill-rule="evenodd"
 More details W3C

enter image description here

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1362.71301" height="300">

	<g fill="#ffff00" fill-rule="evenodd" stroke="#000000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">

		<g><path d="

			M77.71,95.66
			c-2.96667,0 -5.29,-1.83333 -6.97,-5.5
			c-1.64,-3.67333 -2.46,-8.75333 -2.46,-15.24
			c0,-3.90667 0.31333,-8.71 0.94,-14.41
			c0.78,-7.38667 1.93333,-14.08667 3.46,-20.1
			c4.29333,-17.07333 10.52333,-25.61 18.69,-25.61
			c2.96667,0 5.27,1.83667 6.91,5.51
			c1.68,3.63333 2.52,8.69333 2.52,15.18
			c0,3.94667 -0.31333,8.77 -0.94,14.47
			c-0.82,7.38667 -1.97,14.08667 -3.45,20.1
			c-4.3,17.06667 -10.53333,25.6 -18.7,25.6z

			M111.52099,8.30178
			c2.06115,1.73429 3.75889,3.86645 5.10023,6.37052
			c3.04871,5.64268 4.45878,24.3877 4.45878,24.3877
			c0,16.53189 -3.37894,31.27394 -10.19147,44.17397
			l-0.00092,0.00173
			c-3.89891,7.36538 -8.6741,13.15159 -14.36187,17.27221
			c-2.74934,2.00414 -5.66985,3.58411 -8.75938,4.73219
			c-4.08503,1.518 -13.03637,2.26991 -13.03637,2.26991
			c-7.00914,0 -12.81163,-1.73054 -17.18095,-5.41104
			c-2.05687,-1.73261 -3.75131,-3.86164 -5.09027,-6.36127
			c-3.04829,-5.64187 -4.45878,-24.3277 -4.45878,-24.3277
			c0,-16.571 3.37858,-31.33325 10.19147,-44.23397l0.00309,-0.00584
			c3.89784,-7.32217 8.64929,-13.10249 14.28863,-17.26001l0.01363,-0.00996
			c2.82017,-2.04262 5.81485,-3.64444 8.98181,-4.79736
			c4.04607,-1.47296 8.3447,-2.20287 12.88137,-2.20287
			c6.99886,0 12.79443,1.72768 17.16099,5.40178z" id="letter"></path></g>



	</g></svg>