Issues have been reported with the SVG filter URL functionality in Angular 4

Hey there! I'm currently working on drawing a line using SVG in Angular and incorporating some filters for glow effects. However, I've run into an issue where the filter URL is not functioning properly in the browser - nothing is being displayed when I use "ng serve". Strangely enough, the same SVG works perfectly fine in a standalone SVG file.

<svg height="300" width="824">
    <g class="svgWrapper" transform="translate(412,150)">
        <defs>
            <filter id="glow">
                <fegaussianblur class="blur" result="coloredBlur" stddeviation="4"></fegaussianblur>
                <femerge>
                    <femergenode in="coloredBlur"></femergenode>
          <femergenode in="coloredBlur"></femergenode>
          <femergenode in="coloredBlur"></femergenode>
                    <femergenode in="SourceGraphic"></femergenode>
                </femerge>
            </filter>
        </defs>
     <path class="exampleGlow" d="M100,250 C100,100 400,100 400,250" style="fill-opacity: 0; stroke-width: 2; stroke: red; filter: url(#glow);" transform="translate(-250,-200)"/></path>
    </g></svg>

https://codepen.io/OpherV/pen/dRoQdN

htmlcssangularsvg

Answer №1

It appears that Angular inserts a tag such as <base href="/dist/">, causing issues with url resolution in Safari or Firefox. The solution is to add your current location before the filter id's url like so: 

filter: url({{window.location.href}}#glow)
.

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

Creating a component in Angular Library Module using workspace

Within my Angular Workspace, I have three projects set up. In addition to these projects, I've recently created a Library in which I want to incorporate reusable modules. When it comes to generating modules or components for the projects (both applic ...

angularmoduleangular-componentsangular-moduleangular-library

Leverage variables in mixins and extends within Less.js

When using a variable with mixin or extend in Less.js, the following code will result in an error: @bar : bar; .@{bar} { background: yellow; } // ParseError: Missing closing ')' .foo { .@{bar}(); } // This will not work .jam { &:ex ...

cssless

"Facing issue with behaviorSubject's next() method not functioning correctly in Angular

I've developed a HeaderComponent that showcases the header and includes a search bar. When a user types something in the search bar and hits enter, they are directed to the SearchComponent. My goal is to make sure that when a user is on the Search pa ...

angularobservableangular8behaviorsubjectrxjs-observables

How to display document files (.doc or .docx) using a byte array in Angular 4

I am facing a challenge in viewing all the attachments submitted by users. While I can easily view PDF and image files, I seem to have trouble with files having .doc or .docx extensions. Here is my current approach: let file = null; if (extension === &a ...

angulardocument-view

Retrieving an element by its id in Angular 2

Hi there, I'm having some trouble with a code snippet: document.getElementById('loginInput').value = '123'; When trying to compile the code, I keep getting this error message: "Property value does not exist on type HTMLElement ...

javascriptangulartypescript

Web server decides on "Multiple Options" while utilizing %3F instead of "?" in the URL

I have been using the Lazarus-IDE for a project and encountered an issue with one of its components that doesn't accept "?" in the URL for online help info. I attempted to encode "?" as "%3F" in the URL, thinking it was the correct encoding, but both ...

htmlgoogle-chromeurlfirefoxbrowser

What is the best way to send a string value from HTML to a JavaScript function as a parameter?

When embedding HTML codes in Java, I encountered an issue where I needed to pass a string value from HTML to a JavaScript function. Initially, I tried using the following code: out.print("<script>init("+macId+")</script>"); However, this meth ...

javascriptjqueryhtml

Implementing form validation for mandatory fields upon submission in Angular 17

There are several fields such as firstName and lastName that are marked as required on the backend. If the form is submitted without entering the firstName, an error is displayed in the Network Preview. Similarly, if the firstName is filled but the lastNam ...

angulartypescript

What methods does the firebug use to uncover the distinct CSS pathway for Selenium?

When working on automating scripts with Selenium, I encountered a situation where I needed to locate a specific web element using a css selector. I relied on Firebug to provide me with the unique css path for that element. Surprisingly, there were instance ...

htmlcssseleniumautomated-tests

Is it possible to use a hyperlink in Node.js to transmit information to an API using an Express request?

I am working on an HTML page where I need to send data to an API when a specific link is clicked. To achieve this, I am using Express along with a form that has a POST method. Here is the link: <form action="/bx/processed-manually" method=&qu ...

htmlnode.jsformsapiexpress

How can jQuery be used to style a single selected option with a unique color?

I have a dropdown menu with a default placeholder ("ex. Crawler Excavator") displayed in lightgray. I want only this placeholder to be in lightgray when selected, while all other labels should be black. Currently, I am able to color the selected item light ...

javascriptjquerycss

My attempt to deploy the Github website resulted in a blank screen appearing

Hey there, I've been working on coding a website and trying to publish it using Github. However, every time I deploy it, the page shows up blank. Here is the link to my repository: https://github.com/bbravoo/bbravoo.github.io-. Any help would be great ...

htmlcssgithub

Determining the pixel padding of an element that was initially set with a percentage value

I am working with a div element that has left padding assigned as a percentage, like so: padding-left: 1%; However, I need to obtain the value of this padding in pixels for some calculations after the window has been resized. When using JavaScript to chec ...

htmljquerycss

JS receiving a reference to an undefined variable from Flask

I referenced this helpful post on Stack Overflow to transfer data from Flask to a JS file. Flask: @app.route('/') def home(): content = "Hello" return render_template('index.html', content=content) HTML <head> ...

javascriptpythonhtmljqueryflask

Incorporating a navigation bar at the top and a sidebar on the left side of the lower half of an HTML webpage

Currently utilizing materializecss and bootstrap, I am aiming to create a design that resembles: --------------------------------- --------------------------------- | | | | The objective is to split the page into two horizontal sections. The ...

htmlcsstwitter-bootstrap

Challenges with navbar and CSS alignment in Internet Explorer

Looking for some assistance with a HTML/CSS issue... I've created a new menu using the following CSS and code, but I'm encountering a problem with extra space between lines of text within the menu (specifically with the 'big' and &apos ...

htmlcsscss-float

How can CSS filters be applied to an SVG image within a tag?

One way to apply basic CSS filters is by using the following code: <img src="..." style={{ filter: "blur(5px) ..." }} /> Alternatively, you can use this code snippet: <img src="..." style="filter: blur(5px)" ...

reactjssvg

What is the process for including a field specific to a date in a form?

I need the user to select a month and year. In one column, there will be the days of the month they selected [e.g. 1-30]. Users can then add habits in other columns. I want users to be able to input an 'X' for each habit row on a specific date [e ...

javascripthtmlreactjs

The process of setting up a carousel for tables using jQuery

I can successfully implement jquery for an image carousel, but now I need to find a way to create a sliding table format. Any assistance on this matter would be greatly appreciated. Here is the code I currently have: <ul> <li><a style= ...

javascriptjqueryhtmlcsscarousel

Formatting Time in Angular 2 Using Typescript

Upon reviewing my date source, I found the following: TimeR ="2017-02-17 19:50:11 UTC"; Within the HTML file, I implemented this code snippet <span class="text-lg">{{TimeR | date: 'hh:mm'}}</span> The current output displays the t ...

angulardatetimetypescript