Apply a filter specifically to the <image/> element within an SVG, without affecting the entire SVG

I'm currently faced with a minor issue regarding the styling of an SVG and image contained within it. The SVG includes two filters - one for the entire object (#innershadow) and another that should only apply to the image inside, as the wave effect (#turbulance) is affecting the overall appearance of the SVG. I am looking to achieve sharp edges with shadows inside the SVG and a blurred image inside (with both the SVG and #turbulence effect being animated). Is this feasible?

 .svg {
       filter:  url("#innershadow") url("#turbulence");
    }
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2100 1500" class="svg" x="0px" y="0px">
        <filter id="innershadow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"></feGaussianBlur>
          <feOffset dy="12" dx="12"></feOffset>
          <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
          <feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>
          <feComposite in2="shadowDiff" operator="in"></feComposite>
          <feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>
          <feGaussianBlur in="firstfilter" stdDeviation="10" result="blur2"></feGaussianBlur>
          <feOffset dy="-12" dx="-12"></feOffset>
          <feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
          <feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>
          <feComposite in2="shadowDiff" operator="in"></feComposite>
          <feComposite in2="firstfilter" operator="over"></feComposite>
        </filter>

        <filter id="turbulence" x="0" y="0" width="100%" height="100%">
          <feTurbulence id="sea-filter" numOctaves="0.1" seed="2" baseFrequency="0.02 0.05"></feTurbulence>
          <feDisplacementMap scale="20" in="SourceGraphic"></feDisplacementMap>
          <animate xlink:href="#sea-filter" attributeName="baseFrequency" dur="60s" keyTimes="0;0.5;1" values="0.02 0.06;0.04 0.08;0.02 0.06" repeatCount="indefinite"/>
        </filter>

        <defs>
          <pattern id="img1"   patternUnits="userSpaceOnUse" x="0" y="0" height="100%" width="100%">
            <image xlink:href="../../assets/images/backgrounds/wall-main.png"  x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice"/>
          </pattern>
        </defs>

        <path  fill="url(#img1)" filter="url(#innershadow); url(#turbulence)" >
          <animate  repeatCount="indefinite" attributeName="d" dur="5s"
                    values="M382,118c100.383-77.825,276.671,59.258,448,34,65.577-9.668,196.57-94.87,294-58,83.39,31.556,92.13,116.309,174,136,108.23,26.031,207.9-110.974,286-74,61.42,29.075,37.81,132.343,110,186,47.83,35.547,81.23,14.642,132,52,51.7,38.043,88.14,109.739,82,176-6.17,66.5-50.93,79.125-60,144-10.14,72.489,46.43,113.009,26,170-29.24,81.6-166.19,63.417-218,148-53.48,87.31,29.83,209.23-26,264-44.42,43.57-141....
        </path>
      </svg>

https://i.sstatic.net/5t8Qg.jpghttps://i.sstatic.net/TTr9z.jpg

htmlcsssvgsvg-filters

Answer №1

Due to the sharp edges in the expected results, it is recommended to apply the #turbulence filter solely to the fill.

To achieve this effect, it is necessary to separate the shape and fill into different layers: a simple solution is to create a <rect> filled with your image and use an animated <mask> for the sharp edge.

In the CSS code, each specific filter can be assigned to the appropriate element using classes.

.svg {
  filter: url("#innershadow");
}

.svg .myfill {
  filter: url("#turbulence");
}
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2100 1500" class="svg" x="0px" y="0px">
        <filter id="innershadow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"></feGaussianBlur>
          <feOffset dy="12" dx="12"></feOffset>
          <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
          <feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>
          <feComposite in2="shadowDiff" operator="in"></feComposite>
          <feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>
          <feGaussianBlur in="firstfilter" stdDeviation="10" result="blur2"></feGaussianBlur>
          <feOffset dy="-12" dx="-12"></feOffset>
          <feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
          <feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>
          <feComposite in2="shadowDiff" operator="in"></feComposite>
          <feComposite in2="firstfilter" operator="over"></feComposite>
        </filter>

        <filter id="turbulence" x="0" y="0" width="100%" height="100%">
          <feTurbulence id="sea-filter" numOctaves="0.1" seed="2" baseFrequency="0.02 0.05"></feTurbulence>
          <feDisplacementMap scale="20" in="SourceGraphic"></feDisplacementMap>
          <animate xlink:href="#sea-filter" attributeName="baseFrequency" dur="60s" keyTimes="0;0.5;1" values="0.02 0.06;0.04 0.08;0.02 0.06" repeatCount="indefinite"/>
        </filter>

        <defs>
          <pattern id="img1"   patternUnits="userSpaceOnUse" x="0" y="0" height="100%" width="100%">
            <image xlink:href="../../assets/images/backgrounds/wall-main.png"  x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice"/>
          </pattern>
          <mask id="myMask">
            <path  fill="#fff">
              <animate  repeatCount="indefinite" attributeName="d" dur="5s"
                    values="M382,118c100.383-77.825,276.671,59.258,448,34,65.577-9.668,196.57-94.87,294-58,83.39,31.556,92.13,116.309,174,136,108.23,26.031,207.9-110.974,286-74,61.42,29.075,37.81,132.343,110,186,47.83,35.547,81.23,14.642,132,52,51.7,38.043,88.14...

<rect class="myfill" fill="url(#img1)" filter="url(#innershadow) url(#turbulence)" mask="url(#myMask)" width="2100" height="1500" ></rect>
          
 </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

Page elements subtly move when reloading in Chrome

I am experiencing an issue with a div that has left and top offsets randomly selected from an array of values upon page load. Most of the time, it works fine. However, occasionally, upon refreshing the page, the window scrolls down slightly, revealing the ...

javascripthtmlcss

Converting an HTML ul-li structure into a JavaScript object: Steps to save the structure

My HTML structure uses ul and li elements as shown below: <ul class="treeview" id="productTree"> <li class="collapsable lastCollapsable"> <div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div> <span ...

javascriptjqueryhtmlhtml-lists

ng-model to interact with dynamically loaded elements

My dynamic list contains various items, such as cars, and is not of fixed length. Upon loading, the list appears as follows: itemList = [ { id: 0, name: 'bmw' }, { id: 1, name: 'audi' }, { id: 3, name: 'vw' }, ...

javascripthtmlangularjsarrayscheckbox

Creating an event on the containing element

Here is my HTML tag: <ul> <li> <form>...</form> <div> <div class="A"></div> <div class="B"><img class="wantToShow"></div> </div> ...

javascriptjqueryhtml

Issue with Bootstrap 4 navbar z-index not functioning as expected

Hello, I am struggling to place my navbar on top of an image using bootstrap 4. I have set the CSS properties for both elements, but it doesn't seem to be working. Here is the code I am using: <header> <nav class="navbar navbar-toggl ...

csstwitter-bootstrapnavbaroverlapbootstrap-4

Including an image in an HTML email template for sending messages

What are your suggestions for displaying the outlook compose box when a button is clicked, with the email body containing an image of a specific DIV? I've been using html2canvas to capture the image and then using mailto to open an Outlook compose mai ...

javascripthtmlemail

Is there a way to change the color of the icon when the input fields are filled?

I am trying to change the color of the related icon for inputs when they are focused on or not empty, but my code doesn't seem to be working correctly for non-empty inputs. <div class="form-group"> &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

Breaking an array in JavaScript

I'm developing a pure JavaScript hangman game and facing an issue with splitting words from an array into single letters. When I split the array, I get "," for every letter. For example, when I split the word [station], it returns "s,t,a,t,i,o,n". M ...

javascripthtmlcssarrayssplit

What is the best way to animate an element when it comes into the user's view

In order to activate the animation of the skill-bars when the element is displayed on the website, I am seeking a solution where scrolling down through the section triggers the animation. Although I have managed to conceptualize and implement the idea with ...

javascripthtmlcssanimation

Designing Unrestricted Text Input Fields

When dealing with text inputs that contain HTML tags, what is the best practice for properly displaying the input on a different page? Users can get creative with their use of HTML. For example: <p>...</p> <ul><li>...</li>&l ...

htmltextuser-inputstylingtextinput

What is the best approach for Angular directives: utilizing a single object or separate values as attributes?

This question pertains to best practices, but I do believe there is a definitive answer. I have a directive that offers six customizable options. Should I assign each option to a separate attribute on the directive (as shown below): <my-directive my ...

javascripthtmlangularjsangularjs-directiveattributes

Unable to capture HTML form input in $_POST[]

I've encountered an unusual issue while transferring data from an email form (HTML5) to ajax/JSON and receiving false in order to prevent redirection to the php script after pressing the submit button. When I include commas between each data paramete ...

javascriptphpjqueryhtmlajax

Why is the CSS not correctly linked to the index.html file?

Currently, I am working on a project involving a "is it newyear page" that should provide a simple yes or no answer. While the functionality of the page is not the issue, I am facing a problem with the link placement. I have included a link inside the < ...

cssdjango

Updating an attribute while customizing a CSS style: A step-by-step guide

This question is a continuation of my previous inquiries. I have a CSS file that needs to be included (first_style.css in the code snippet below). The necessary style is img { height:auto; }. Any additional styles can be added before or after this line. O ...

jqueryhtmlcss

How can I remove the gaps between Bootstrap panels on a website?

The Issue https://i.stack.imgur.com/I5EFR.png My problem is with the spacing between the panels, highlighted in red. I've attempted to remove them by using the following CSS: .panel { margin-top: 0; margin-bottom: 0; padding-top: 0; ...

htmlcsstwitter-bootstrap

The presence of the 'absolute' attribute on an element disrupts the smooth fading

I am encountering an issue where the text I am trying to fade just suddenly jumps to its final state without any smooth transition in between, and there is also a delay. I have been using CSS properties like opacity: 0/1 and transform: opacity for the fa ...

csscss-positionopacityfade

"Extracting data from a JSON document to populate a dropdown menu in an HTML

Currently, I am working on a PhoneGap project for the company with a specific task related to a JSON file called city.json. [{"CityID":1,"CityName":"Magelang"},{"CityID":2,"CityName":"Jayapura"},{"CityID":3,"CityName":"Aceh"}] My main goal is to extract ...

htmljsonparsingcordova

Utilize an npm package to transform a CSS file into inline styles within an HTML document

I have an HTML file with an external CSS file and I would like to inline the styles from the external style sheet into one inline <style> tag at the top of the head. Any assistance would be greatly appreciated. Note: I do not want to use the style a ...

javascripthtmlcssnpm

Utilizing Several Pop-up Windows on a Single Page

I am currently working on a website feature where users can click on an image to open a modal window with menu items inside. However, while the first modal functions properly, subsequent modals do not. Here is the JavaScript code I am using: <script&g ...

javascripthtmlwebbootstrap-modal

Change the Jumbotron's background color by utilizing the .bg- classes to customize it

As a user of Bootstrap, I rely on the Bootswatch themes for my projects. However, I have noticed that the Jumbotron in every theme defaults to an unappealing grey background. To address this issue, I am exploring the use of the .bg- classes for customizing ...

cssbootstrap-4