The # character in a URL is reserved to indicate the start of a fragment identifier. You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23
One way that works on most modern browsers is to use background: black; color: white; mix-blend-mode: multiply; for transparent text on a black background, or background: white; color: black; mix-blend-mode: screen; for transparent text on a white background. For this to work in chrome, you also need to set any background colour on the html … Read more
Edit 2016: read the next two answers. JQuery 3 fixes the underlying issue Vanilla JS: element.classList.add(‘newclass’) works in modern browsers JQuery (less than 3) can’t add a class to an SVG. .attr() works with SVG, so if you want to depend on jQuery: // Instead of .addClass(“newclass”) $(“#item”).attr(“class”, “oldclass newclass”); // Instead of .removeClass(“newclass”) $(“#item”).attr(“class”, … Read more
How to change the color of an svg element?
There are several approaches to make a transparent arrow over an image with CSS. The two I will describe involve pseudo elements to minimize markup and have the same output. You can also see an SVG approach at the end of this answer : The transparent effect on the black part arround the arrow is … Read more
You can do it by making the background into a pattern: <defs> <pattern id=”img1″ patternUnits=”userSpaceOnUse” width=”100″ height=”100″> <image href=”wall.jpg” x=”0″ y=”0″ width=”100″ height=”100″ /> </pattern> </defs> Adjust the width and height according to your image, then reference it from the path like this: <path d=”M5,50 l0,100 l100,0 l0,-100 l-100,0 M215,100 a50,50 0 1 1 -100,0 … Read more
The solution to convert SVG to blob URL and blob URL to png image const svg=`<svg version=”1.1″ baseProfile=”full” width=”300″ height=”200″ xmlns=”http://www.w3.org/2000/svg”> <rect width=”100%” height=”100%” fill=”red” /> <circle cx=”150″ cy=”100″ r=”80″ fill=”green” /> <text x=”150″ y=”125″ font-size=”60″ text-anchor=”middle” fill=”white”>SVG</text></svg>` svgToPng(svg,(imgData)=>{ const pngImage = document.createElement(‘img’); document.body.appendChild(pngImage); pngImage.src=imgData; }); function svgToPng(svg, callback) { const url = getSvgUrl(svg); svgUrlToPng(url, … Read more
Firstly, use an IMG tag in your HTML to embed an SVG graphic. I used Adobe Illustrator to make the graphic. <img id=”facebook-logo” class=”svg social-link” src=”https://stackoverflow.com/images/logo-facebook.svg”/> This is just like how you’d embed a normal image. Note that you need to set the IMG to have a class of svg. The ‘social-link’ class is just … Read more
The accepted answer shows too complicated way. As Forresto claims in his answer, “it does seem to add them in the DOM explorer, but not on the screen” and the reason for this is different namespaces for html and svg. The easiest workaround is to “refresh” whole svg. After appending circle (or other elements), use … Read more
There are a few things incorrect with your XSLT: It is trying to replace the whole ‘use’ element with an attribute. You are using two pairs of quotes around $blue, which causes it to be treated as a string. You are not using namespaces even though your XML uses a namespace. Please try this: <xsl:stylesheet … Read more