Im trying to use a svg image as the cursor when hovering over a certain div but I cant get it working. Ive read that it should be as simple as adding this :
cursor: url(http://elusivethemes.com/assets/down.svg), auto;
But it wont seem to work. The strange thing is it works if i use a different svg image from a different url.
Any ideas ?
Thanks in advance.
According to the Mozilla Developer Network
Starting with Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1),
Gecko also supports the SVG image format for cursors. However, the SVG
image must contain a length-valued (not percentage-valued) height and
width on its root SVG node. JavaScript, CSS animation, and declarative
SMIL inside an SVG image are ignored; you can't use SVG to create an
animated cursor, for example.
Therefore, you should explicitly declare the height and width in your .svg file.
The .svg you provided has no dimensions declared as you can see:
<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" viewBox="0 0 320.995 320.995" x="0px" y="0px" height="200" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" viewbox="0 0 320.995 320.995" version="1.1">
If you add the width and height attributes, you should be fine.
Just make sure you don't declare the dimensions with percentages
Related
I'm trying to override an icon in an angularjs component that I have no control over. It's a stepper library called md-steppers. I was able to change the current step icon in chrome. Here is how I did it.
/* ... */
&.md-active md-step-label-wrapper {
font-weight: bolder;
display: flex;
&:before {
font-family: 'Material Icons';
content: '\E150';
color: white;
}
}
/* ... */
As you can see I'm altering the icon by loading the font Material Icons and then changing the content.
This solution is working great in Chrome. I'm having a few problems in firefox, however. The icons does not seem to be rendering properly when I'm at 100% ( or less ) zoom. Everything above that seems fine.
You can compare the image above with the result on Chrome ( both at 100% zoom )
The result on Firefox seams a little bit Blurrier and not well formed.
I'm aware that this might be a bug in Firefox itself as it has been reported before. I saw a few workaround that revolve around the mask css property but I'm not sure it can apply to me, since i'm not using mask at all. This is assuming the icons are rendered as SVG.
I've already look up CSS - Using SVG mask not displaying correctly in Firefox and Firefox not rendering svg properly on the topics but I could not make it work.
Am I missing something here and what can I do to correct this ?
Here is a Jsfiddle with the problem occurring.
The problem seams to be present in the iframe, in chrome as well.
Disclaimer: I can't verify that any of the solutions I've written below work as I can't replicate the issue on my device in the JSFiddle you provided.
It displays fine for me in Firefox and Chrome. FWIW: I'm using a Mac
Mini on MacOS 10.14.6 with a 4K display # 1920 x 1080 (i.e. HiDPI).
The same browser (i.e. Firefox) may handle fonts differently on
depending on operating system and hardware setup.
Solution
The demo link for md-steppers uses SVG data in the CSS:
.md-step.md-complete md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center; }
See Line 398
I would probably try using this same method and avoid using the icon font if you think this is where the issue is arising from. If you also have the same issue in Firefox at the md-steppers demo link above then I guess the issue is bigger than just icon fonts and is also affecting SVGs. You can scroll down further to: Other Possible Fixes.
The Material Design icons can be downloaded in SVG format from here.
Use the search filter in the sidebar and type in edit for the icon you want, then press the [Download] SVG 24 button in the bottom left corner.
The icon you download will be the default black colour so there are some changes you will need to make in order to make it suitable for you to use.
Open up the downloaded SVG in a code editor and refer to the way the SVG is formatted in the CSS for the md-steppers demo. Change the height and width properties, and also add the fill property to the <svg> tag, so it should look something like:
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="rgba(255,255,255,0.87)"><path ...leave as is... /><path ...leave as is... /></svg>
Copy the SVG code as a single line and use it in a similar way that it's used in the md-steppers demo CSS:
.md-step.md-active md-step-label-wrapper::before, .md-step.md-success md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat center center;
}
JSFiddle: https://jsfiddle.net/wx0brdjL/
Alternatively, you can save the SVG after you modify the width/height/fill to a file, then reference it in your CSS like:
background-image: url('edit-24px.svg');
Other Possible Fixes:
If using the SVG above is still causing things to blur on Firefox, or if you want to stick with using the icon font, there are a few things to try which might fix the way that the icon font renders on your device:
Option 1
Applying transform: translateZ(0) to either &.md-active md-step-label-wrapper or &:before.
Option 2
Applying the font-smoothing (see Firefox specific vendor prefix) or text-rendering CSS properties. Keeping in mind that changes here might affect the way it renders on someone else's device.
Option 3
I just came across this open issue on the Material Design Icons Github where a user recommends using this CSS hack: transform: rotate(0.03deg)
I can't reproduce this issue with the jsfiddle you supplied (all icons look okay for me). But I have had similar issues myself with other font-icons.
I think the issue comes from the font-weight: bolder; you've added to the parent element in your code. The browser now also wants to make the icon bolder, but since there isn't a "bolder"-version of the icon the browser tries to do it by itself and thereby making the icon look weird.
Your fiddle doesn't have the font-weight: bolder;, so im thinking your issue might have something to do with that. Try and remove it and see if the issue still persists.
Is it possible to use SVG Defs outside of the SVG Tag. Something like this:
<defs>
// defs code goes here
</defs>
<svg>
// svg code goes here
</svg>
If so -- how can I associate the defs tag with the particular svg tag that I want to target?
YES
At least outside THAT svg element, which, i think, is what you're going after?!
IT ONLY NEEDS TO BE INSIDE any SVG TAGS
but those don't have to be more than <svg style="display:none;"><defs>...</defs></svg>
(It doesn't matter if it's defined afterwards or before and can even be written outside the body (although i'm not sure that'd be valid html).)
I'm trying to set up some svg paths with skrollr on this page of my site: http://erinwilder.me/portfolio/main-street/
I have the latest version of skrollr called in my footer (it came with my theme). I added the skrollr init, but I have also tested without it.
This is the code I am using for my svg:
<svg id="imac" width="555px" height="444px"><path id="imac-inner" style="fill:none; stroke:#000000; stroke-width:2; stroke-linecap:round; stroke-dasharray: 4565; stroke-dashoffset: 4565;" data-0="stroke-dashoffset: 4565;" data-end="stroke-dashoffset:0;" d="M183.53,439.19v2.61c0,1,30.71,1.19,58.06,1.19,13.84,0,27.18,0,35.28,0s21.21,0,35,0c27.35,0,57.59-.18,57.59-1.19v-2.61m-184.2.13c2.46,0.24,7.31.42,16.83,0.57s22.43,0.22,39.67.22c8.52,0,16.6,0,23.72,0l11.59,0,11.59,0c7.12,0,15.2,0,23.72,0,17.24,0,30.22-.07,39.68-0.22s14.36-.33,16.83-0.57l0.78-.09c1.77-.23,1.77-0.51,1.77-0.85V437c0-.9-1.31-1.22-10.77-2.67-5.29-.81-11.28-1.73-13.25-2.59-0.4-.18-2.56-2.2-5.32-26.1-1-8.82-1.82-17.92-2.24-24.84H536.15c8.85,0,15.36-7.31,15.36-16.16V17.88C551.51,9,545,2,536.15,2H19.21C10.35,2,2.5,9,2.5,17.88v346.8c0,8.85,7.85,16.16,16.71,16.16H214.32c-0.43,6.92-1.22,16-2.24,24.84-2.76,23.9-4.91,26-5.32,26.13-2,.86-8.06,1.76-13.35,2.57-9.46,1.45-10.87,1.76-10.87,2.65v1.35c0,0.34.1,0.62,1.87,0.85ZM552.5,330.39H3.49M529.75,26.32a1.57,1.57,0,0,0-1.57-1.57H25.83a1.57,1.57,0,0,0-1.57,1.57V308a1.57,1.57,0,0,0,1.57,1.57H528.18a1.57,1.57,0,0,0,1.57-1.57V26.32ZM277.68,15.48a2.09,2.09,0,1,0-2.09-2.09A2.09,2.09,0,0,0,277.68,15.48Zm0,349.44a9.32,9.32,0,1,0-9.33-9.32A9.32,9.32,0,0,0,277.68,364.93Zm62.14,15.9H214.19"></svg>
On the page, there should be a computer drawing itself around the outlined image in the section title "The Website."
Does anyone know what I am doing wrong here?
I am using materializecss so I already have the material design icons available. How can I use them as background-image value in my CSS code (SASS actually)?
You can use the Material Design Icons' SVG code to set a background-image, like so, for example:
.selector {
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="%232196F3" d="M 5,3L 19,3L 20.7359,6L 20.7304,6C 20.9018,6.29149 21,6.63428 21,7L 21,19C 21,20.1046 20.1046,21 19,21L 5,21C 3.89543,21 3,20.1046 3,19L 3,7C 3,6.638 3.09618,6.29846 3.26437,6L 3.26135,6L 5,3 Z M 5.57294,4L 5,5L 5,5L 19,5L 18.4303,4L 5.57294,4 Z M 7,12L 12,17L 17,12L 14,12L 14,10L 10,10L 10,12L 7,12 Z "></path></svg>');
}
A fiddle
Quirks I noticed / was reminded of while making the fiddle:
It doesn't seem to work without the xmlns attribute
A # in the fill or elsewhere needs to be escaped with %23 (or use the rgb(a) value instead)
You may need to adjust width and height and viewBox attributes depending on your needs (whether to fill the area, repeat or not (which you can also affect with background-repeat), etc.)
Another technique you could use if you're using the Material Icons Font is making use of the :before and :after pseudo selectors + html entities.
CSS (codepen example)
/* imports the font */
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* adds icon in front of the element */
.someclass:before {
/* https://github.com/google/material-design-icons/blob/master/iconfont/codepoints */
content: "\E3E7";
font-family: "Material Icons";
}
(here is the link to the icon codes)
It's not exactly a background-image but still could be useful.
For a while I thought there was something wrong with my code, but it looks like there is an issue with the svg files on libre maps.
I've been trying to use their svg files with jvectormaps but they wouldn't work no matter what. Then I tried to use object and the img tag to just embed them, and they still won't work so obviously there's something wrong with these svg files. I tried a few things such as removing the xml tag, and updating the doctype, but still no luck.
This is one of the files I'm having an issue with.
http://libremap.org/data/boundary/2000/sub_county/svg/cs42_d00.svg
Yes. There is a problem with their SVGs. The root <svg> element should have an xmlns attribute, but it doesn't.
Eg. the map you linked to starts with:
<svg width="100%" height="100%" preserveAspectRatio="xMidYMax"
viewBox="2.682664 439.717923 49.914144 29.355176">
it should be:
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" preserveAspectRatio="xMidYMax"
viewBox="2.682664 439.717923 49.914144 29.355176">
Standalone SVGs must have the namespace attribute. You should probably report it as a bug to them.
In the meantime, you can download the SVG and correct it yourself. Then use your local copy.
Update
There is another issue with the SVG. It has fill set to none and stroke-width set to 0 (see line 8). So nothing will display by default. If you change either of those (see line 8), it will display.
<g id="Unknown_Area_Type_cs42_d00_e00" style="fill:grey;stroke:rgb(255,0,0);
stroke-width:0.01;stroke-linecap:round">
Perhaps it was intended that you use CSS to style the map. Having something like the following should also work:
g#Unknown_Area_Type_cs42_d00_e00 *
{
fill: grey;
stroke:rgb(255,0,0);
stroke-width:0.01;
}