0

fi是否可以屏蔽 SVGPattern？

我制作了以下 SVG，但我无法让面具工作。或者我应该使用clipPath？

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="160px" height="600px" viewBox="0 0 160 600" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="circlePattern" patternUnits="userSpaceOnUse"
             x="0" y="0" width="10" height="10"
             viewBox="0 0 10 10" fill="blue" >
      <circle cx='4' cy='4' r='4'/>
    </pattern> 
    <clipPath id="clipPath" maskUnits="userSpaceOnUse">
        <rect x="0" y="0" width="200" height="100" fill="white" />
    </clipPath>
  </defs>

  <!-- Outline the drawing area in blue -->
  <g id="box">
  <rect fill="url(#circlePattern)" width="160" height="600" clip-path="url(#clipPath)"/>
</g>
</svg>

更新：（我想使用这个复杂的路径）

我似乎无法使用此路径来创建 mask/clipPath

    <path style="fill:#FFFFFF;" d="M9.35,37.5c4.1,2.467,8.566,3.7,13.4,3.7
        c7.667,0,13.783-2.05,18.35-6.15c5.066-4.566,7.6-11.167,7.6-19.8c0-5.7-2.367-12.133-7.1-19.3c-4.1-6.267-9.7-12.684-16.8-19.25
        c-5.133-4.8-10.383-8.983-15.75-12.55c-2.4-1.6-3.883-2.6-4.45-3c-1.733-1.033-3.267-1.8-4.6-2.3h-0.05c-1.3,0.5-2.8,1.267-4.5,2.3
        c-0.633,0.434-2.133,1.417-4.5,2.95c-5.467,3.667-10.867,8-16.2,13c-6.967,6.566-12.467,12.917-16.5,19.05
        c-4.633,7.1-6.95,13.467-6.95,19.1c0,8.633,2.534,15.233,7.6,19.8c4.567,4.1,10.684,6.15,18.35,6.15c4.833,0,9.3-1.233,13.4-3.7
        c4-2.367,7.1-5.6,9.3-9.7C2.25,31.9,5.383,35.133,9.35,37.5z"/>
4

1 回答 1

1

您的蒙版矩形没有指定填充，因此它将使用默认值，即黑色即 rgba(0, 0, 0, 1)。所以遮罩的亮度到处都是 0，你什么也看不到。

如果您将遮罩上的填充更改为<rect>，fill="white"您会看到遮罩充当剪辑，这似乎就是您要查找的内容。其他颜色，如“橙色”或“蓝色”，因为它们的亮度既不是 0 也不是 1，会给您带来中间效果。

clipPaths 将形状剪辑到边界。蒙版通常会修改颜色，您可以使用它们通过使用白色蒙版进行剪辑，但如果您只想剪辑某些内容，那么 clipPath 会更快。

clipPaths 和掩码可以包含任何图形元素，包括路径。

于 2013-09-05T16:20:35.317 回答