I have an SVG inside a div like this
<div class="container">
<svg>...</svg>
</div>
with the following scss:
svg {
background-color: black;
fill: none;
}
what I expected was for the SVG to be transparent, with a black fill around it, so that you can see the background color of the container. I can not simply set the fill attribute to the background color, as I don't know what color it will be, beforehand.
Is there a simple solution to have an SVG with no fill attribute but a background color?
My SVG:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="_x30_0_x5F_A" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120
120;" xml:space="preserve">
<path d="..."/>
</svg>
Related
I'm trying to apply a custom cursor pointer with an SVG image but it's not working, instead if I use a png image everything is working fine.
Here's my code.
.container {
/* not working one */
cursor: url("/images/icon-cross.svg"), auto;
/* working one */
cursor: url("/images/icon-cross.png"), auto;
}
Is there any trick/workaround to make it working also with SVG or it's something which is not supported?
Thanks
UPDATE
Here's the svg code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4
L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1
c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1
c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>
</svg>
Your image is simply too large. Reduce the width and height to something less than 128px.
Icon size limits for cursors in CSS | MDN
...the limit of the cursor size is 128×128px. Larger cursor images are ignored.
Example:
cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' ...") 16 16, pointer;
https://jsfiddle.net/bx4og7n5/
Edit: Added hotspot (center coordinates) for the cursor (see Dennis Bauszus' comment)
You can also use a Blob URL to insert inside the url function of CSS.
const blob = new Blob([**your SVG String**],{type: 'image/svg+xml'});
const URL = window.URL.createObjectURL(blob);
Now you can use this URL variable and can insert inside the url function of CSS to obtain desired cursor pointer.
I am given a SVG file with the following content (a plus icon in black):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1460px" height="610px" viewBox="0 0 1460 610" enable-background="new 0 0 1460 610" xml:space="preserve">
<g>
<path d="M746.602,304h-16v-16H729v16h-16v1.602h16v16h1.602v-16h16V304z M746.602,304"/>
</g>
</svg>
I would like to display it in a page with the following tag:
<img src="plus-icon-black.svg">
However the plus sign is displayed quite far from where the img tag is.
How can I display the svg image where the img tag is?
Your SVG image was saved with huge amounts of whitespace around the + shape.
Here is a clean version:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="449.1 991.8 33.6 33.6">
<path d="M482.7 1007.8h-16v-16h-1.6v16h-16v1.6h16v16h1.6v-16h16v-1.6z"/>
</svg>
You can control the size with CSS or using the <img> width or height attributes. Please reduce the artboard size to your shape's bounding-box when exporting to SVG in Illustrator.
So I have this arrow SVG which I am using for hiding/displaying a div. How can I rotate that arrow back and forth on every click?
Html:
<md-icon md-svg-icon="assets/svg/down-arrow.svg"></md-icon>
SVG:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="arrow" x="0px" y="0px" viewBox="0 0 386.257 386.257" style="enable-background:new 0 0 386.257 386.257;" xml:space="preserve" width="24px" height="24px">
<polygon points="0,96.879 193.129,289.379 386.257,96.879 " fill="#e18327"/>
</svg>
It is very simple to do with CSS Transforms and JavaScript. Use JS to listen for the click event and when it happens toggle a class (which has the CSS transform: rotate) on or off.
In the below snippet, I've used an inline SVG (that is, SVG within the md-icon tag as the SVG file is not hosted anywhere to link to) but you can do that with external SVG files also. Just add the listener and set the class to the md-icon element or whatever is the element that contains the SVG.
document.querySelector('md-icon').addEventListener('click', function() {
this.classList.toggle('rotated');
});
.rotated {
transform: rotate(-90deg);
}
md-icon {
display: inline-block;
transition: all 1s;
}
<link href="http://rawgit.com/angular/bower-material/master/angular-material.min.css" rel="stylesheet"/>
<md-icon md-svg-icon='assets/svg/down-arrow.svg'>
<?xml version="1.0" encoding="iso-8859-1" ?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="arrow" x="0px" y="0px" viewBox="0 0 386.257 386.257" style="enable-background:new 0 0 386.257 386.257;" xml:space="preserve" width="24px" height="24px">
<polygon points="0,96.879 193.129,289.379 386.257,96.879 " fill="#e18327" />
</svg>
</md-icon>
We can of-course use two different SVG files and change the source (from down arrow to right arrow) on click but that wouldn't produce a smooth transition like the below snippet.
Another choice would have been to use SMIL animations but they are being deprecated and hence it is better to use CSS transforms.
I am working with SVGs, and would like to create one with a transparent background. The following example, should appear as just a white circle with a path in it. However, the whole 300px white canvas appears as a square, how do I get the result I want, as I can't really see where the canvas is defined?
<?xml version="1.0"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" height="300" width="300" version="1.1" xml:space="preserve">
<circle fill="#FFFFFF" cx="150.267" cy="149.854" r="111.303" fill-opacity="1"/>
<g transform="translate(0.000000,632.000000) scale(0.100000,-0.100000)" fill-opacity="1">
<path fill="#54534A" d="M2204.344,4414.691v-122.67h81.643h81.642l-1.237,6.804c-0.619,3.505-1.649,10.515-2.474,15.462l-1.443,8.659
h-61.438h-61.644v38.141v38.141h54.635h54.635v16.493v16.494h-54.635h-54.635v36.079v36.08h60.613h60.407l1.443,10.515
c0.825,5.979,2.062,13.401,2.68,16.493l1.237,5.979h-80.818h-80.612V4414.691z"/>
<!-- Other paths omitted -->
</g>
</svg>
Appears as a 300 x 300px rectangle with a transparent background here with a smaller white circle inside and the letter E(path).
You sure you're not giving the svg element a white background with CSS by accident?
The canvas is the <svg> element itself, you can change its background using CSS:
svg {
background: red;
}
I'm using an SVG as an image mask, but I can't figure out how to make the SVG change its size when the page is resized. When I change the window size, the image inside the SVG resizes, but the SVG doesn't. Any ideas about how to solve this?
This is the SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 480 302" enable-background="new 0 0 480 302" xml:space="preserve">
<defs>
<mask id="maskHome" maskUnits="objectBoundingBox">
<path fill="#FFFFFF" d="M240,0C91,0,0,44,0,44v214c0,0,91,44,240,44s240-44,240-44V44C480,44,389,0,240,0z"/>
</mask>
</defs>
</svg>
CSS:
.maskHome {
mask: url("../img/maskHome.svg#maskHome");
-webkit-mask-image: url("../img/maskHome.svg");
height:100%;
width: 100%;
}
HTML:
<img class="maskHome" src="img/banner2.png" width="100%" height="100%" />
All you need to do is use cover in your mask declaration. That should work.
.maskHome {
mask: url("../img/maskHome.svg#maskHome") center center / cover;
-webkit-mask-image: url("../img/maskHome.svg") center center / cover;
height:100%;
width: 100%;
}