像画布渐变一样的SVG渐变？

Question

这是我建造的。 您可以拖动图像来浏览整个图像。

<?xml version='1.0' standalone='no'?>
<svg version='1.1'>
  <image xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    id='background-image' />
  <clipPath>
    <rect />
  </clipPath>
  <image xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg'
    id='main-image'/>
</svg>

除了具有实心边缘的裁剪矩形之外，我想做的是这样， 除了SVG。 需要注意的是，由于裁剪后的矩形具有响应性，因此它必须具有响应性。

可以在SVG中做类似的事情吗？

我想到的一个想法是类似于以下任一图像，其中将使用多个渐变，但是对于可以在画布中轻松完成的操作来说，似乎需要大量工作。

Answer 1

您想要的是<mask> 。

在此蒙版中，将附加黑色填充的小圆形<rect> ，并在其上应用feGaussianBlur。

 const bdy = document.body, svg = document.getElementById('svg'), crc = document.getElementById('circle'), rec = document.getElementById('rectangle') let mousednX = 0, mousednY = 0 window.addEventListener('load', position) bdy.addEventListener('mousedown', mousedown) window.addEventListener('mouseup', mouseup) bdy.addEventListener('mousemove', moveEye) function position(){ const box = svg.getBoundingClientRect() svg.style.left = -(box.width - innerWidth) / 2 + 'px' svg.style.top = -(box.height - innerHeight) / 2 + 'px' } function mousedown(e){ e.preventDefault() mousednX = e.clientX mousednY = e.clientY bdy.addEventListener('mousemove', mousemove) } function mouseup(){ bdy.removeEventListener('mousemove', mousemove) } function mousemove(e){ adjustX = e.clientX - mousednX adjustY = e.clientY - mousednY if (svg.getBoundingClientRect().left + adjustX < 0 && svg.getBoundingClientRect().right + adjustX > innerWidth){ svg.style.left = svg.getBoundingClientRect().left + adjustX + 'px' } else if (svg.getBoundingClientRect().left + adjustX >= 0){ svg.style.left = 0 + 'px' } else { svg.style.left = -(svg.getBoundingClientRect().width - innerWidth) } if (svg.getBoundingClientRect().top + adjustY < 0 && svg.getBoundingClientRect().bottom + adjustY > innerHeight){ svg.style.top = svg.getBoundingClientRect().top + adjustY + 'px' } else if (svg.getBoundingClientRect().top + adjustY >= 0){ svg.style.top = 0 + 'px' } else { svg.style.top = -(svg.getBoundingClientRect().height - innerHeight) } mousednX = e.clientX mousednY = e.clientY } function moveEye(e){ rec.setAttribute('x', -(svg.getBoundingClientRect().left) + e.clientX - rec.getBoundingClientRect().width / 2) rec.setAttribute('y', -(svg.getBoundingClientRect().top) + e.clientY - rec.getBoundingClientRect().height / 2) } 

 body { width: 100vw; height: 100vh; overflow: hidden; margin: 0; } #svg { width: 6144px; height: 4608px; position: absolute; left: -3072px; /* set with JS */ top: -2304px; /* set with JS */ } #background-image { width: 6144px; height: 4608px; opacity: 0.25; } #rectangle { width: 35vw; height: 75vh; } #main-image { width: 6144px; height: 4608px; mask: url(#myMask); } #myMask .bg { width: 100%; height: 100%; } 

 <svg id='svg' viewBox='0 0 6144 4608' version='1.1'> <defs> <filter id="blurMe"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> <mask id="myMask"> <rect class='bg'/> <rect id='rectangle' x='3172' y='2404' rx='10' ry='10' fill="white" filter="url(#blurMe)"/> </mask> </defs> <image x='0' y='0' preserveAspectRatio='none' xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg' id='background-image' /> <image x='0' y='0' preserveAspectRatio='none' xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg' id='main-image'/> </svg> 

但是请注意，通过CSS设置svg元素的尺寸是SVG2的一项新功能，并且所有浏览器仍未实现它（例如Firefox）。 因此，这里是SVG1兼容版本，但是那里的vw / vh单位不起作用。

 <svg width="500" height="500" viewBox="0 0 500 500"> <defs> <filter id="blurMe"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> <mask id="myMask"> <rect width="500" height="500" fill="black"/> <rect y="100" fill="white" width="50" height="50" x="35" y="35" rx="5" ry="5" filter="url(#blurMe)"/> </mask> </defs> <image xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg' id='background-image' width="500" height="500" style="opacity:0.3"/> <image xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg' id='main-image' width="500" height="500" mask="url(#myMask)"/> </svg> 

通过将背景的填充颜色设置为某种灰色阴影，您甚至可以只用一张图像就可以完成所有操作：

 <svg width="500" height="500" viewBox="0 0 500 500"> <defs> <filter id="blurMe"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> <mask id="myMask"> <rect width="500" height="500" fill="#333"/> <rect y="100" fill="white" width="50" height="50" x="35" y="35" rx="5" ry="5" filter="url(#blurMe)"/> </mask> </defs> <image xlink:href='https://i.postimg.cc/hvH4yn2Q/map.jpg' id='main-image' width="500" height="500" mask="url(#myMask)"/> </svg> 

这是带有单个图像的交互式版本 。