SVG Filter: The image is not completely covered by a width and height of 100%

Here's a basic SVG Filter. Click the example below to toggle the appearance of the filter:

var image = document.querySelector('image');
        
        var url = 'https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3YHuw5jGnBUY4Y';
        
        image.setAttribute('xlink:href', url);
        
        window.addEventListener('click', function() {
          var filter = image.getAttribute('filter')
            ? ''
            : 'url(#blur)';
          image.setAttribute('filter', filter);
        })
image {
          background: red;
        }
<svg width='200' height='200'>
          <filter id='blur' width='100%' height='100%'>
            <feGaussianBlur stdDeviation='2' result='blur' />
          </filter>
          <image x='0' width='200px' height='200px' xlink:href='' id='svg-image' filter='url(#blur)'  />
        </svg>

I'm looking to make the filtered image the same size as the original image. Any suggestions on how to achieve this? Any help would be greatly appreciated!

javascripthtmlcsssvgsvg-filters

Answer №1

To establish the initial size, utilize the x and y attributes in the following manner.

<filter id='blur' x='0' y='0' width='100%' height='100%'>
...


var picture = document.querySelector('image');

var link = 'https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3YHuw5jGnBUY4Y';

picture.setAttribute('xlink:href', link);

window.addEventListener('click', function() {
  var filter = picture.getAttribute('filter')
    ? ''
    : 'url(#blur)';
  picture.setAttribute('filter', filter);
})
picture {
  background: red;
}
<svg width='200' height='200'>
  <filter id='blur' x='0' y='0' width='100%' height='100%'>
    <feGaussianBlur stdDeviation='2' result='blur' />
  </filter>
  <image x='0' width='200px' height='200px' xlink:href='' id='svg-image' filter='url(#blur)'  />
</svg>

Answer №2

Setting the filter dimensions to 200px by 200px and hardcoding it to apply a blur effect when clicked on works as expected

var image = document.querySelector('image');

var url = 'https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3YHuw5jGnBUY4Y';

image.setAttribute('xlink:href', url);

window.addEventListener('click', function() {
  var filter = image.getAttribute('filter')
    ? ''
    : 'url(#blur)';
  image.setAttribute('filter', filter);
})
image {
  background: red;
}
<svg width='200' height='200'>
  <filter id='blur' width='200px' height='200px'>
    <feGaussianBlur stdDeviation='2' result='blur' />
  </filter>
  <image x='0' width='200px' height='200px' xlink:href='' id='svg-image' filter='url(#blur)'  />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revise the calculation output when a specific input is missing

As I work on creating a basic web page for computing values based on selected options, I've encountered an issue with the calculation process. The result does not immediately appear; instead, I have to input a value like 0 and then delete it in order ...

javascriptjquerycalculation

The error message encountered is: "TypeError: Unable to access the 'apply' property of an undefined object within the

Currently in the process of developing a node js application with the integration of DHTMLX Scheduler feature on one of the pages. However, my progress is hindered by a recurring issue upon loading the page, resulting in the following error message: TypeE ...

javascriptnode.jsexpressmongoskindhtmlx-scheduler

provide a hyperlink to the icon located in front of the navigation bar

I'm struggling to come up with a suitable title for this issue. What I am trying to achieve is placing a small icon in front of the navbar so that visitors can click on it and be directed to another site. Initially, I attempted to place the icon using ...

javascriptjqueryhtmlcsstwitter-bootstrap

Encountering a problem with integrating Vue js and making a jquery

Hello there! I'm currently working on fetching data through ajax and utilizing a vue wrapper component. Here's the code snippet I'm using: <html> <head> <title>title</title> <meta charset="UT ...

javascriptajaxvue.js

What is the method for incorporating a button on an HTML webpage that triggers a server-side script to execute?

Currently, I have the following: HTML <form action="test.php" method="get"><input type="submit" value="Run me now!"> php <?php shell_exec('sh test.sh'); ?> sh #!/bin/bash sudo systemc ...

phphtmlshell-exec

The duplication of the Javascript code is creating a conflict within the slider functionality

Attempting to create both an image slider and text slider on the same page using the same JavaScript is proving to be a challenge. Despite researching and trying to implement a no-conflict solution, the sliders still do not function properly together. Wh ...

javascriptjquery

The specified type does not meet the constraint as it lacks the required index signature

I'm currently working on refactoring a TypeScript project that utilizes React Hooks. While I have some knowledge of TypeScript, I am still more of a beginner than an expert. My main goal is to create reusable code for this project through the use of ...

javascriptreactjstypescriptreact-hookstypescript-typings

retrieve the timestamp when a user initiates a keystroke

Seeking assistance from the community as I have been struggling with a problem for days now. Despite searching on Google and Stack Overflow, I haven't found a solution that works for me. My web application features an analog clock, and I need to capt ...

javascripthtmlclock

Discovering the offset location using touchmove

Struggling with a code for dragging/moving an element via touchscreen. The code is functional, but encounters a common issue - unable to drag from the touchpoint itself. Every movement initiates from the edge of the element, no matter where the touch begin ...

javascriptcssoffsettouchmove

Combining array elements into sets of n

I am facing a challenge with an array manipulation task. let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]; My goal is to divide this array into a specified number of smaller arrays such that each new array contains the same number of elements ...

javascriptarraysset

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

javascriptjqueryhtmlcss

The property 'caseSensitive' is undefined and cannot be read

After creating a simple code, I am puzzled by an error message that seems to be case sensitive. However, the code appears correct based on my understanding. Here is the code snippet: App.js const express = require('express'); const path = requir ...

javascriptnode.jsexpresstypeerror

In the realm of JavaScript, consider logging a message to the console if the array value happens to be

I'm facing an issue with the code below. My goal is to log 'empty array value' whenever there is an empty value, but it's not functioning as expected. Can anyone advise me on what the value of an empty array item is and how I can modify ...

javascript

Unveiling an HTML file using the express.static middleware on Replit

When using Replit to render an HTML file with res.sendFile within an app.get function, everything works smoothly. I can include logos, styles, and JavaScript logic files by utilizing the express.static middleware. However, if I attempt to also make the HTM ...

javascriptnode.jsexpressmiddlewarereplit

Transform text that represents a numerical value in any base into an actual number

Looking to convert a base36 string back to a double value. The original double is 0.3128540377812142. When converting it to base 36: (0.3128540377812142).toString(36); The results are : Chrome: 0.b9ginb6s73gd1bfel7npv0wwmi Firefox: 0.b9ginb6s73e Now, h ...

javascriptjqueryajaxhtml

Identifying dates in pandas index and header: A comprehensive guide

After utilizing the HTML parser to extract a table from a particular website, the current output looks similar to the following: Current Output: 1 Sep 2 Sep 3 Sep 4 Sep 00:00 11 47 54 10 ...

pythonhtmlpython-3.xpandashtml-parsing

Creating Twillio access codes with NodeJS

As I work on a project integrating Twillios Programmable Video API, I find myself navigating through the Node JS documentation for the first time. It's been quite clear so far, but I do have a couple of lingering questions. Below is the code snippet ...

javascriptnode.jstwiliotwilio-api

Tips for converting each item within an array into its own separate element

https://i.sstatic.net/Dxj1W.pngI currently have an array of objects that I am utilizing to generate a table in Angular. The table is functioning properly and successfully displays the data. However, I now have a requirement to enable editing for each indiv ...

htmlarraysjsonangulartypescript

Adding a Bold Headline in Select2: A Quick Guide

I have thoroughly searched through all of the select2 documentation but unfortunately, I could not find any information on how to add bold headlines. Can anyone please provide a full code example (including CSS) on how to accomplish this? ...

jqueryhtmljquery-select2

Updating className in React by responding to button clicks without relying on numerous conditional statements

I've been working on a small project for the past few weeks. The main idea is to have a stepper with different steps that the user can click on to see their tasks for each step. There is also a completion button for each step, but I'm struggling ...

javascriptreactjsif-statement