像畫布漸變一樣的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> 

這是帶有單個圖像的交互式版本 。