我正在尝试创建具有2条路径的svg图像,其中外部形状填充有颜色,而内部形状则没有。我正在使用React,代码如下:
<SvgIcon
className={className}
nativeColor={theme.palette[color] ? theme.palette[color].main : color}
style={{
height: `${size}px`,
width: `${size}px`,
}}
viewBox="0 0 32 32">
<g fillRule="evenodd">
<path
d="M16,0 C9.372583,0 4,5.0144108 4,11.2 C4,19.6 16,32 16,32 C16,32 28,19.6 28,11.2 C28,5.0144108 22.627417,0 16,0 Z"
fill={color}
fillOpacity="1"
fillRule="nonzero"
stroke="none"
/>
<path
d="M15.5,4 L6,9.18181818 L15.5,14.3636364 L23.2727273,10.1231818 L23.2727273,16.0909091 L25,16.0909091 L25,9.18181818 M9.45454545,12.7918182 L9.45454545,16.2463636 L15.5,19.5454545 L21.5454545,16.2463636 L21.5454545,12.7918182 L15.5,16.0909091 L9.45454545,12.7918182 Z"
fill="none"
/>
</g>
这将显示整个填充的形状,因此内部形状不可见。但是,如果不是fill =“ none”而是我具有fill =“#FFFFFF”,则此方法有效,并且我看到显示的形状。知道为什么以及如何在不用颜色填充内部形状的情况下修复它吗?
您将需要将2d属性合二为一并使用 fill-Rule="evenodd"
<svg
style="height: 100px"
viewBox="0 0 32 32">
<path
d="M16,0 C9.372583,0 4,5.0144108 4,11.2 C4,19.6 16,32 16,32 C16,32 28,19.6 28,11.2 C28,5.0144108 22.627417,0 16,0 Z
M15.5,4 L6,9.18181818 L15.5,14.3636364 L23.2727273,10.1231818 L23.2727273,16.0909091 L25,16.0909091 L25,9.18181818
M9.45454545,12.7918182 L9.45454545,16.2463636 L15.5,19.5454545 L21.5454545,16.2463636 L21.5454545,12.7918182 L15.5,16.0909091 L9.45454545,12.7918182 Z"
fill="red"
stroke="none"
fill-rule="evenodd"
/>
</svg>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句