Is there a way to access SVG using CSS when using them like this?
.logo {
...
background-image: url("../VectorImages/logo.svg");
}
I came across some scripts that claim to convert svgs to inline SVG, making them accessible for CSS. I tried it and it works for img-Tags, but not when using SVG as a div's background-image.
My goal is to change the color of the SVG, so what I want to achieve is
svg path { fill: #000; }
In case you are utilizing SCSS – I have created a mixin specifically designed to handle SVG encoding
Check out this CodePen: http://codepen.io/jakob-e/pen/doMoML/
You can find the SCSS code here: http://codepen.io/jakob-e/pen/GjgXmK.scss
$color-1: red;
$color-2: green;
$svg-1: '<svg viewBox="0 0 2 2"><circle fill="#{$color-1}" cx="1" cy="1" r="1"/></svg>';
$svg-2: '<svg viewBox="0 0 2 2"><circle fill="#{$color-2}" cx="1" cy="1" r="1"/></svg>';
.class-1 { @include background-svg($svg-1); }
.class-2 { @include background-svg($svg-2); }
One way to include the SVG file in your CSS is by using a data URI.
HTML
<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>
CSS
.logo {
background: url('data:image/svg+xml;utf8,<svg ... > ... </svg>');
}
This technique allows you to apply colors to the SVG with the fill property when used as a background.
Note: To learn more about incorporating
SVGfiles usingdata URIin your CSS, check out this helpful article.
When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...
This form's HTML is set up for input with a popup display feature upon submission. Currently, only text can be displayed in the popup. It doesn't show the text of selected checkboxes or dropdown lists - just numbers for the dropdown and "ON" for ...
I am facing an issue in owl carousel where my absolute element (placed in the carousel item) with the 'description' class is going behind the next item. I have tried various methods to bring it forward but without success. Can someone please assi ...
I have used two image buttons and placed them in an a tag within the same bootstrap column. However, this is how they appear: https://i.sstatic.net/5O3bm.png This is my code: <body> <div class="backgroundImage"> <div ...
I want to hide a specific element when the burger button is clicked. (See CaptureElementNoDisplay.PNG for the element to hide) When I click the burger button again to close the menu, I want the hidden item to be displayed once more. I've successfull ...
Recently, I encountered an issue that has me stumped. Suppose I have a database table A with multiple columns and the server (PHP script) renders this data into an HTML table for the web client. Now, the challenge lies in allowing users to add/delete rows ...
I am facing an issue with my PHP page that requests data from another page using JSON. Currently, I have an AJAX call set up like this: $.ajax({ type: "POST", url: "getdata.php", cache:false, data:"lis ...
Currently, I am working on developing a horizontal website that spans 16000px using a specific template that can be found at the following link: http://tympanus.net/Tutorials/WebsiteScrolling/ The website is divided into four sections, each 4000px wide. M ...
I'm attempting to dynamically add an 'active' class to the current section on a page using scrollify.js. While I can retrieve the index value, I am struggling to get the section id or class. How can I obtain the id or class of the current s ...
Below is a code snippet that includes a tags, with one containing an image. <div class="container"> <a href="#">Not styled</a> <a href="#"><img src="image.png"></a> </div> If I specifically want to style ...
After studying numerous examples on how to pass a PHP variable to a JavaScript file, I have yet to successfully accomplish it. This is my PHP file: $title = $json["title"]; echo json_encode($title); And here is my app.js JavaScript file: $.ajax({ ...
Currently, I am facing a challenge where I need to send an ajax POST request (json) to a different domain. However, since I am testing on localhost and do not have access to the server yet, everything is a bit more complicated. Unfortunately, it is not po ...
I am facing an issue with the show/hide model on my website. When I click the link associated with it, nothing happens. I want it to function in a way that when I click "Sign up," the register form is displayed and when I click "Login," the register form ...
I am working with 'material-ui' and attempting to change the color of a table element based on its value. In the code snippet below, I have tried to make the background color go red if the cell value is "Out of Zone". However, even though the tab ...
I am attempting to create a number field (.item_adults) that will multiply itself and display the value in a class called "item_price". Here is what I have created so far: <div class="bookSection"> <input class="item_adults" name="adults" type= ...
I'm facing an issue with jQuery UI Touch Punch. I am able to drag everything smoothly, but when I apply css3's "translateY", it works perfectly on the computer but fails on iPad. The element suddenly jumps up at dragstart and then allows me to dr ...
At the moment, only results appear when you modify the query. I want to modify this to allow user input. I have set up the fields, but I need help adjusting my ajax code to accept the new search criteria which is crucial for functionality. This is what m ...
I have a dynamic slider with items in a list that will change based on the page. My goal is to create a loop that updates the data-slide-to attribute with the correct slide number for each item. After several attempts, I managed to come up with a solutio ...
On an older website using jquery and nodejs, I am working on some filtering tasks. My goal is to target the b elements that are enclosed within a p tag. Specifically, I only want to select those b elements that do not have any text surrounding them. The T ...
I've been struggling with this issue for some time now. When researching the onclick JavaScript call, I noticed that sometimes it is written as onClick with a capital C, while other times it's simply onclick. The code I'm working on is part ...