Question

我有一个SVG代码，它绘制两条曲线，现在我要屏蔽一个html div元素，其中包含SVG行的css3背景渐变。

＆＃13;

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <div id="maskDiv" style="width:1280px;height:500px;background: -webkit-linear-gradient(left, rgb(0, 156, 204), rgb(0, 111, 145));">
    <svg id="maskSVG" version="1.1" id="Svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1279.959px" height="339.297px" viewBox="0 0 1279.959 0.297" enable-background="new 0 0 1279.959 339.297"xml:space="preserve" color-interpolation-filters="sRGB" image-rendering="optimizeQuality" shape-rendering="optimizeSpeed" stroke="none" style="-webkit-backface-visibility: hidden;">
    <g>   
    <defs>
    <clipPath id="maskRect1" >
    <path id="curve" fill="#000" d="M1279.919,13c0,0-612.618,21.562-      816.925,22.298C347.224,35.715,0,26,0,26V13
c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z"
  fill="transparent" style="-webkit-backface-visibility: hidden;">
    </path> 
    </clipPath>
    </defs>
    <rect id="curve1" x="0" y="0" width="1280"  height="300" clip-path="url(#maskRect1)" />
    </g>
    </svg>
    </div>
    </body>
    </html>

＆＃13;

谢谢，我们将不胜感激。

Answer 1

您有几个问题：

您的路径定义不正确。 "- 816"不是有效的坐标值。：）
你还没告诉div使用剪辑路径。对于Chrome / webkit，您需要使用：

-webkit-clip-path: url(#maskRect1);

＆＃13;

<!DOCTYPE html>
<html>
  <body>
    <div id="maskDiv" style="width:1280px; height:500px; background: -webkit-linear-gradient(left, rgb(0, 156, 204), rgb(0, 111, 145)); -webkit-clip-path: url(#maskRect1);"></div>

    <svg>
      <defs>
        <clipPath id="maskRect1" >
          <path id="curve" d="M1279.919,13c0,0-612.618,21.562-816.925,22.298C347.224,35.715,0,26,0,26V13
c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" />
        </clipPath>
      </defs>
    </svg>

  </body>
</html>

＆＃13;

如何使用svg屏蔽html div元素

1 个答案: