主页 / 问题 / 1144986
Accepted
Leks
Asked:2020-06-24 10:07:48 +0000 UTC2020-06-24 10:07:48 +0000 UTC

为什么内部带有渐变的蒙版不能应用于图像？

  • 772

<svg width='400' height='400' style='border: 1px solid black'>
  
<radialGradient id='a'>
  <stop offset='40%' stop-color='red'></stop>
  <stop offset='60%' stop-color='blue'></stop>
</radialGradient>

<mask id='b'>
  <circle r="50" cx="50%" cy="50%" fill="url(#a)" />
</mask>
<image x="50%" y="50%" width="291" height="195"
       mask="url(#b)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>

</svg>

svg

2 个回答

  1. Best Answer

    正如@MaximLensky 在评论中指出的那样，为了使面具工作，您需要添加到面具

    <rect width="100%" height="100%" fill="#fff" />

    这使得图像的整个区域可见，即不被蒙版剪裁。

    当应用于具有白色以外颜色的填充蒙版时，蒙版使图像的区域半透明。
    При fill="black"，应用蒙版的图像部分被剪切。在这里阅读更多

    使用的图像具有尺寸400 х 143px，因此稍微更改了源代码

    <svg width='400' height='400' style='border: 1px solid black'>
  
<radialGradient id='a'>
  <stop offset='40%' stop-color='red'></stop>
  <stop offset='60%' stop-color='blue'></stop>
</radialGradient>

<mask id='b'> 
   <rect width="100%" height="100%" fill="#fff" />
  <circle r="50" cx="50%" cy="50%" fill="url(#a)" />
</mask>
<image x="50%" y="50%" width="400" height="143"
       mask="url(#b)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>

</svg>

    与 <image x="0%" y="50%"

    <svg width='400' height='400' style='border: 1px solid black'>
  
<radialGradient id='a'>
  <stop offset='40%' stop-color='red'></stop>
  <stop offset='60%' stop-color='blue'></stop>
</radialGradient>

<mask id='b'> 
   <rect width="100%" height="100%" fill="#fff" />
  <circle r="50" cx="50%" cy="50%" fill="url(#a)" />
</mask>
<image x="0%" y="50%" width="400" height="143"
       mask="url(#b)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>

</svg>

    • 2

  2. 如果我理解正确，它应该是这样的。

     <!DOCTYPE html>
    <html>
        <body>
        <svg width='1241' height='823' style='border: 1px solid black'>
            <radialGradient id='a'>
                <stop offset='40%' stop-color='red'></stop>
                <stop offset='60%' stop-color='blue'></stop>
            </radialGradient>
            <symbol id="s-mask">
                <circle r="350" cx="50%" cy="50%" fill="url(#a)" />
            </symbol>
            <mask id='b' x="0" y="0">
                <use xlink:href="#s-mask"></use>
            </mask>
            <image mask="url(#b)" xlink:href="https://www.dlt.travel/immagine/46566/Tour_virtural_Taj_mahal.jpg"/>        
        </svg>
        </body>
    </html>

    注意USE标签。

    • 1

相关问题