the svg element is not displaying the shadow effect

I'm struggling with setting up a shadow for an SVG that has a mask applied to it. Here is the code snippet and JSFiddle link: http://jsfiddle.net/3kxnmhfL/

.watch-video-svg {
  width: 50px;
  height: 50px;
}
<div class="watch-video-svg">
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" height="100%" width="100%" viewBox="0 0 100 100">
    <defs>
        <filter id="shadow">
            <feDropShadow dx="4" dy="8" stdDeviation="4"/>
        </filter>
        <mask id="cut-off-bottom">
            <circle cx="50%" cy="50%" r="50%" fill="white"/>
            <polygon points="31,20, 31,77, 80,50" fill="black"/>
            <!-- <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  /> -->
        </mask>
    </defs>
    <circle cx="50%" cy="50%" r="50%" fill="red" mask="url(#cut-off-bottom)" filter="url(#shadow)" />
</svg>
</div>

My goal is to have the shadow only around the circle in the SVG, not the containing div. Why might the shadow not be showing up as expected?

htmlcsssvg

Answer №1

When working with SVG filters, it's important to understand the concept of the "filter region". This region defines the area where the browser stores the results of the applied filters. By default, the filter region is set to be the bounds of the element plus a margin around it.

In some cases, such as when using a stdDeviation value of "4", the default 10% margin may not be enough to accommodate the full extent of the blur effect. This can result in a clipped blur, even if the viewBox has been adjusted to cover the entire blur area.

To address this issue, you can increase the size of the filter region. For example, setting the allowance to 20% might resolve the problem:

<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">

In addition, simplifying the SVG by removing unnecessary elements like masks and adjusting the viewBox can help ensure that the entire blur effect is displayed properly.

.watch-video-svg {
  width: 500px;
  height: 500px;
  background: linen;
}
<div class="watch-video-svg">
  <svg xmlns="http://www.w3.org/2000/svg"  height="100%" width="100%" viewBox="-5 0 120 120">
    <defs>
        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="4" dy="8" stdDeviation="4"/>
        </filter>
    </defs>
    <circle cx="50" cy="50" r="50" fill="red" filter=url(#shadow) />
    <polygon points="31,20, 31,77, 80,50" fill="white"/>
</svg>
</div>

Answer №2

To ensure your mask is properly adjusted, consider using a rectangle instead of a circle within the mask since your element is already circular.

It is also important to modify the viewBox to allow room for the shadow effect:

.watch-video-svg {
  width: 50px;
  height: 50px;
}
<div class="watch-video-svg">
  <svg xmlns="http://www.w3.org/2000/svg"  height="100%" width="100%" viewBox="0 0 120 120">
    <defs>
        <filter id="shadow">
            <feDropShadow dx="4" dy="8" stdDeviation="4"/>
        </filter>
        <mask id="cut-off-bottom">
            <rect x="0" y="0" width="100%" height="100%" fill="white"/>
            <polygon points="31,20, 31,77, 80,50" fill="black"/>
        </mask>
    </defs>
    <circle cx="50" cy="50" r="50" fill="red" mask="url(#cut-off-bottom)" filter=url(#shadow) />
</svg>
</div>

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

The Javascript and CSS code for a button fails to trigger the animation function after the initial click

Is it possible to trigger the animation function multiple times after the initial click without making changes to the HTML code? The ID and class in the code must remain as they are. I attempted to use the display property set to none, but it did not yie ...

javascriptcss

Button background must be grayscale, while the text should remain unaffected

I have a variety of buttons with different background images. My goal is to apply a grayscale filter to the backgrounds by default and remove the filter on hover, without affecting the color of the button text. Currently, when I apply the grayscale filter ...

cssbuttontextbackgroundgrayscale

React component state change in reverse

As I work on a simple login form component, I encountered an issue where clicking on the form should make it disappear and only display my JSON data. However, due to my limited experience with React state management, I seem to be achieving the opposite eff ...

javascriptcssreactjsdom

Personalize the font style of the icon property in Material UI Table when utilizing text in place of an icon

In my React app using Material UI table, I needed a custom event on the action button that displayed text instead of the usual icons for Add, Update, or Delete. Instead of creating my own icon, I opted to use text for the button like so... <MaterialTabl ...

cssreactjsmaterial-uimaterial-table

Tips on formatting text as bold or italic when tweeting from my website to our Twitter account

Currently, I am utilizing the Twitter OAuth library in conjunction with PHP to publish a tweet from my website directly to my Twitter account. My main objective is to highlight some text while posting, however, I have not been successful in identifying t ...

phphtmlcsstwitter

Smarty is failing to generate Javascript on all files

I have a traditional PHP/Smarty Website setup. It consists of an index.php home base and a templates folder containing .tpl Files. The key templates include header.tpl, footer.tpl, index.tpl, and subpage.tpl. Both index.tpl and subpage.tpl include the hea ...

javascriptphpjqueryhtmlsmarty

Preloading web page with Flash animation for seamless transitions and stylish fade in/out effects

My customer is requesting a loading animation or movie (already created in Flash CS5) to be displayed on the initial page of the website (root, '/' - the first thing visitors see when they go to domain.tld). After the animation finishes, it sho ...

javascriptjqueryhtmlflashxhtml

IE9 causing trouble with CSS vertical alignment

I'm trying to center a button with text using Cuffon for the font, but I can't get it to align vertically and horizontally. The text-align property is working fine, but vertical align isn't. Here's the code for my div block: btndownlo ...

htmlcss

Having trouble aligning input elements in the middle of a div container

Can anyone help me with centering elements inside a div? Check out this example: I created a wrapper for the number inputs and tried applying the text-center property on them, but it's not working. I also changed the display to block, but that doesn& ...

htmlcss

Is there a way to reset my div back to its initial background color when clicked a second time?

I am currently utilizing the jQuery addClass and removeClass animate feature for my project. Basically, what is happening is that when the user clicks on a particular link, a dropdown navigation will appear. This feature is essential for ensuring responsi ...

jqueryhtmlcssaddclassremoveclass

How can I bypass hotlink protection for RSS images?

According to the definition, RSS feeds are considered public. When images are displayed within the feed, it is essentially "hotlinking," meaning that the content is being read directly from the Internet rather than your local machine. Is there a specific ...

htmlimagersshotlinking

Tips for merging two text boxes in a form with CSS

Is it possible to combine two text boxes in a form using CSS, similar to the design on Tumblr's login page at ? If CSS is not the solution, what alternative methods can be used? Any assistance would be greatly appreciated. I am aiming to enhance the ...

htmlcssformsinputtextinput

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

jquerycssdrop-down-menunavbar

Guide on navigating to a specific page with ngx-bootstrap pagination

Is there a way to navigate to a specific page using ngx-bootstrap pagination by entering the page number into an input field? Check out this code snippet: ***Template:*** <div class="row"> <div class="col-xs-12 col-12"> ...

htmlcssangulartypescriptreact-native

What is the best way to access an element that has transitioned from display:none to display:block within the DOM?

I am experimenting with applying JavaScript to an element that is initially hidden using the display:none attribute. For example: <input type="button" onclick="document.getElementById('container').style.display='block';"> <di ...

javascriptcssdom

Passing a JavaScript variable to PHP within an HTML document: Parsing data from Wikipedia

I am currently working on passing a JavaScript variable named $url to a PHP function in the same HTML file. The idea is that a user inputs a species into a textbox, and the Wikipedia API is called to check if the input matches a Wikipedia page. If a match ...

phpjavascripthtmlajaxparsing

A guide on creating a downward animation of an object using CSS3

I am currently working on practicing CSS 3 animation. I am facing a challenge in figuring out how to make the item fall down the page at full speed without needing the user to track it downward with the mouse, all without using javascript. Ideally, I want ...

css

Personalized pop-up experience with AngularJS

I am currently working on creating a filter in AngularJS without relying on jQuery. To achieve this, I am using a custom directive to generate a popup that includes a checkbox. However, I have encountered a couple of issues. 1. I have created two popups u ...

javascripthtmlcssangularjs

Tips for decreasing the size of an individual division within the grid system in Bootstrap

<div class="col-sm-2" style="text-align: right;" > mytext1 </div> <div class="col-sm-2" style="text-align: right;" > mytext2 </div> <div class="col-sm-2" style=&qu ...

javascripthtmlcssgridbootstrap-5

Utilize jQuery to generate a dynamic table within a Razor view

I am trying to implement a table in a razor view. <div class="row" style="margin-left:80%"> @if (ViewBag.IsGlobal == 1) { <script> $(document).ready(function () { $("#btnViewLocal").prop("disabled",t ...

jqueryhtmljsonasp.net-mvcrazor