I am changing a background via this css:
background: url('data:image/svg+xml;utf8,<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="10px" height="11px" viewBox="0 0 10 11" enable-background="new 0 0 10 11" xml:space="preserve">
<g><g><path fill="#3477d1" d="M3.7,11c-0.3,0-0.6-0.2-0.8-0.4L0.2,6.9C-0.1,6.4,0,5.7,0.4,5.3C0.9,5,1.5,5.1,1.9,5.5L3.6,8l4.4-7.5 C8.4,0,9-0.2,9.5,0.2c0.5,0.3,0.6,1,0.3,1.5l-5.2,8.8C4.4,10.8,4.1,11,3.7,11C3.8,11,3.7,11,3.7,11z"/>
</g></g></svg>');
background-repeat: no-repeat;
background-position: center;
and it works in Chrome & Safari, however in firefox I get invalid property value and it fails to load the SVG.
I cant work out which property it is referring to.
Has anyone come across this or can point me in the right direction?
# is a reserved character in a URL as it indicates the start of a fragment identifier.
You need to URL encode the URL which will mean that the # will become %23
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I'm trying to replicate the ever so popular shape dividers with my own SVG.
I created an SVG in Illustrator and a similar version in Inkscape. Both have the same issue aligning to the bottom: There is a slim gap between it and the following div.
Example of the gap
This behavior is unique to my SVG, others I've found on the internets do not have this issue.
The margin on the section is set to 0, and changing the CSS height for #section-2-55348 svg changes the size of the gap.
#section-2-55348 {
position: relative;
overflow: hidden;
}
#section-2-55348 svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
fill: #003767;
}
<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 1920 40" style="enable-background:new 0 0 1920 40;" xml:space="preserve">
<path d="M0,18.5c0,0,415.4,34.9,956.3-1.9s963.7-0.9,963.7-0.9V40H0L0,18.5z"/>
</svg>
In the next example svg{display:block;} makes the difference. I hope this is what you need.
*{margin:0; padding:0;}
svg{fill: #003767;display:block;}
div{background:#003767;min-height:5em;}
<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 1920 40" style="enable-background:new 0 0 1920 40;" xml:space="preserve">
<path d="M0,18.5c0,0,415.4,34.9,956.3-1.9s963.7-0.9,963.7-0.9V40H0L0,18.5z"/>
</svg>
<div></div>
Not exactly sure what is going on here for you but I have a workaround that might help you. It's not very elegant but you can set a negative margin on your svg. I would recommend giving your SVG an ID so that this margin does not get applied to other SVGs on the page.
svg#my-svg-id {
margin: -5px;
}
It's a little hacky but since I'm not exactly sure about what the code on the rest of the page looks like, that's the best option I could think of.
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.
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 recently launched a site which used a bit of inline SVG.
<svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<path d="[...]"/>
</svg>
Everything was perfect in Chrome and Firefox, but when I tested on an iPhone or in desktop Safari, the layout was completely broken and many of the SVGs were missing. I ran the source through the W3C validator and everything was find. I work with SVG a lot, so this was very confusing...
It turns out that Safari and Mobile Safari freak out if you omit the height and width attributes I was setting the dimensions with CSS, which worked fine in other browsers. But I had to add those attributes back in to make it behave consistently:
<svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="55.221px" height="58.079px" viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
<path d="[...]"/>
</svg>
Notice the width and height attributes that were missing above.
Also, it's interesting to point out that the value of preserveAspectRatio matters. I had a couple other inline SVG elements that had preserveAspectRatio="none meet" and they were unaffected by this issue.
Another scenario / fix for this is if you're scaling your SVG via CSS, to make sure that you have both max-width and max-height declared.
.whatever svg {
vertical-align: middle;
max-height: 1rem;
max-width: 1rem;
}
I have a simple SVG circle:
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" overflow="visible" enable-background="new 0 0 100 100"
xml:space="preserve">
<circle fill="#6E6F6F" cx="50" cy="50" r="49"/>
</svg>
This image is being used as a background, and resized to 22px:
background: transparent url('++resource++svg/star_neg.svg') no-repeat 0 0 / 22px 22px;
When I view this in the browser, the right and bottom sides of the circle appear flat in Firefox (Chrome looks fine). If I zoom in on Firefox, the circle appears complete as expected. How can I fix this?
Finally found a simple solution. The div displaying the svg as the background should be larger than the SVG. I had the box at 22px square, the same size I was setting the SVG. To fix the issue, I displayed the box as 25px, with the background image centered instead of set in a corner.