Question

是否可以屏蔽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"/>

Answer 1

你的掩码rect没有指定填充，所以它将使用默认的黑色，即rgba（0,0,0,1）。所以掩码的亮度在任何地方都是0，你什么也看不见。

如果您将面具<rect>上的填充更改为fill="white"，您会看到面具充当剪辑，这似乎是您正在寻找的内容。其他颜色如＆＃34; orange＆＃34;或者＆＃34;蓝色＆＃34;因为它们的亮度既不是0也不是1会给你带来中间效果。

clipPaths将形状剪切到边界。掩码通常会修改颜色，可以通过使用白色蒙版来使用它们进行剪辑，但如果你想要的只是剪辑某些东西，那么clipPath会更快。

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

屏蔽SVGPattern

1 个答案: