Basically, I have a couple .svg images put into an <img> tag on my HTML page like that:
<img src="images/corner.svg" alt="menu" class="menu" onClick="Fade();"/>
All of those images are overlapping with each other. They have the same size but different content.
I'm now trying to make only the content of those images clickable.
With pointer-events: visible; or pointer-events: painted; in CSS that seemed to be possible, but i can't get it work like that. The image still receives clicks at every point in it and not only on the content part.
I tried pointer-events: none; on the top image and that disabled clicks on the top image, which sounded like there was no mistake in the HTML or CSS code.
I created those .svg images in Illustrator CC with a transparent background, so normally there can't be content, and I exported it with the following options:
(sorry for this being in german)
I have no idea where the problem could be.
I've had success inlining the SVG, setting the pointer-events to none for the SVG elements, and then setting the pointer-events for the path element within the SVG to fill. Here's a CodePen example.
svg {
cursor: pointer;
pointer-events: none;
}
path {
pointer-events: fill;
}
The problem is that you're using an <img> tag. They work like rasters even when the data is SVG i.e. the individual items don't really exist, it's just a picture which you can either have as entirey clickable or not.
If you want the drawing to be interactive you'll need to use an <object> or <iframe> tag and then you can make the individual shapes clickable or not by using the pointer-events attribute.
You could also include all the svg data inline in the html file but if you did that you'd need to make sure all the id attributes were unique.
This is what worked for me
svg {
pointer-events:none;
}
svg *{
pointer-events:auto;
}
don't hesitate to add !important in case it has conflict with your current style.
Related
So I've made my own SVG line icon in adobe illustrator, I want to import it into my code however when I use:
<img class="shape-1" src="assets/images/widgeticon.svg" alt="shape">
I am able to hover over the icon and drag it, I would like a method in which I am unable to drag the icon off the webpage (for example dragging it into a new tab) - I hope i'm making sense.
I have previously used this function:
<i class="lni-thought"></i>
However this was done using a LineIcons.css, how can I recreate this on my own terms so that the icon does not move if attempted to be dragged off the screen?
Strange question I know, look forward to your answers!
Paul's answer would work, however you do loose some control over the SVG when including it as a background.
A better solution would to just disable dragging on the element, or disable pointer-events:
<div class="shape-1" title="shape" draggable='false'></div>
or,
<div class="shape-1" title="shape" style='pointer-events: none'></div>
Read up about pointer-events before using it. Disabling them will make the cursor 'pass through' elements, rendering them un-selectable at all. But it can be useful if you instead wrap the icon in a <a> tag.
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
You could inline the SVG into your HTML.
Or something like the following should work. Use another element, then set the SVG image as the background.
<div class="shape-1" title="shape"></div>
.shape-1 {
display: inline-block;
width: 24px;
height: 24px;
background: url(assets/images/widgeticon.svg") no-repeat;
}
Use pointer-events: none; css in img tag, and if any click event add on parent tag.
Or draggable='false' attribute
Example: in i tag you can add your click/hover any event if required.
<i>
<img style="pointer-events: none;" src="https://www.svgrepo.com/show/19461/url-link.svg" alt="shape">
</i>
<img draggable='false' src="https://www.svgrepo.com/show/19461/url-link.svg" alt="shape">
I am playing around with SVGs (trying to replace icon fonts with SVG.) I got it to render the image/svg using object tag. However, I can't get it to change color from CSS. Assuming, I prefer coloring it from CSS, is there a way to do that while I use to embed SVG.
<object class="partnerLogo" type="image/svg+xml" data="assets/logos/sample.svg">
Your browser does not support SVG
</object>
CSS, I tried so far:
.partnerLogo {
width: 100%;
height: 100px;
color: red;
color-fill: red;
}
In sample.svg file, I added, <?xml-stylesheet type="text/css" href="../css/styles.css"?> just before
styles.css is being added to the page.
Thanks!
It isn't possible to directly modify the fill if you're using the SVG using the <object> method. The SVG is included as a document fragment inside the object tag, so your properties aren't passed as you can see in this image.
However, there are two ways you can modify the colors of an external SVG.
1) Use Javascript (recommended)
Using Javascript you can fetch the SVG contents via an XHR, and then inject it as inline SVG. As it's inline SVG technically, you can modify the fill color. There's a library I have written (svg-loader) that make it really easy to do this.
You just need to include the library and use data-src attributes to load SVGs.
Example:
Here, I have included a logo in three different formats, modifying the fill color.
<script type="text/javascript" src="https://unpkg.com/external-svg-loader#latest/svg-loader.min.js" async></script>
<div style="display:flex;">
<div style="background:black;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="yellow"></svg>
</div>
<div style="background:purple;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="white"></svg>
</div>
<div style="background:green;">
<svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="red"></svg>
</div>
</div>
2) Use filter CSS property
You can use the filter CSS property to reach any color using bunch of operations (brightness, contrast, hue-rotate..). There an existing stack overflow discussion on this.
Example:
.red {
filter: invert(20%) sepia(97%) saturate(4013%) hue-rotate(353deg) brightness(93%) contrast(127%);
}
<img src="https://s2.svgbox.net/assets/logo-white.svg" class="red" />
The big drawback here is that you'd need to calculate this for every color (using this) and doesn't make it obvious how it works. Also, it won't work well with SVGs having multiple colors.
As far as I know, color in SVG-CSS should be stroke for borders and fill for backgrounds:
.partnerLogo {
width: 100%;
height: 100px;
stroke: red;
fill: red;
}
You can't use external CSS classes to style a SVG called within an < object > element, despite a lot of blog posts in the subject says you can interact with, buit this is misleading for this particular case. You must add the formattings inline, inside the actual SVG.
If you need to access and alter the actual objects and paths of an SVG from your main css file, you must embedd it inline, using the < svg > tag.
Here's a post that covers it all:
https://vecta.io/blog/best-way-to-embed-svg
I know this is an old question now - but this is for any future readers who want to colour their SVGs with pure CSS rather than have to use JS. I find this method quite convenient compared to other methods - and you can even colour your SVGs with a gradient etc.!
I simply make a div which will contain my SVG and give it a class.
HTML:
<div class="colourful-svg"></div>
Then the colour is done using masks and background colour in your CSS.
CSS:
.colourful-svg {
mask-image: url("path/to/your/svg-file.svg");
background: green;
// Make sure you define dimensions for your div otherwise it won't show up
height: 500px;
width: 500px;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
This will make your SVG fill the div you had made and therefore be the size you need it to. It then uses a mask to essentially only show your background colour through the SVG you have linked to using the url() function.
Masks now have pretty good support with prefixes (about 94% globally from caniuse.com at the time of writing), so I think this is quite a simple and easy way to implement colour SVGs - I hope someone finds this useful!
So, I have links that are automatically generated.
For a specific page I don't want users to click the link (only see that it is there).
Without modifying the code, I am thinking of putting a div container over it with high z-index so that users cannot click it.
Should I embed a 1 pixel image with background repeat that are positioned exactly on top of the link or is there a better way of achieving this?
Thanks
You can disable pointer events using CSS, actually. For example, if you add a class or can identify the <a> element in some way, you could use this CSS:
a.disabled {
pointer-events: none;
cursor: default;
}
Browse support for pointer-events can be seen here.
Credit to this StackOverflow answer.
As per the default behavior, alt attribute is rendered first time just before the image rendering. I am displaying 25 images in a grid so it looks bit awkward as all alt attributes are displayed first.
Is it possible to hide alt attributes in Firefox?
Note: alt attributes contain dynamic names in my case.
After trying all the other methods here, I found this method works best which makes the text transparent until the image loads:
.yourClass img {
color: transparent;
}
The way to prevent alt attribute values from being displayed is to remove the attribute.
The meaning of an alt attribute (not tag) is that it specifies an alternative, a substitute for the image, in situations where the image is not displayed. So if you want to hide it when the image has not yet been loaded, you are asking for behavior that contradicts the very meaning of the attribute.
You can however make the alt text invisible (with the usual CSS Caveats) on Firefox by setting e.g.
img { background: white; color: white; }
in CSS. This implies that the alt texts are invisible also in case the browser never gets the image, or the browser has been configured not to display images.
From the reference of all the above answers, I figured out best one is to use
img:-moz-loading {
visibility: hidden;
}
Suppose there is no image and we use color as white or transparent then alt attribute no more use so, we need this attribute if there is no image to show which image here to load and to show alternative text to display.
Old question, but as of 2020, the img:-moz-loading {visibility: hidden;} does not work any longer.
Instead of doing img {background: white; color: white;}, I think it makes a lot more sense to do this:
img {
color: transparent;
}
That way it doesn't mess up images that are supposed to have some transparency. Also, it doesn't affect the rarer cases when you need to set a background color for an img.
For bonus points you could do this:
<img src="src.com/src" onerror="this.style.color='black'"/>
That would revert it to the normal alt color in the event that the browser fails to fetch the image.
Of course this is tedious to add to every image, but easier if you are using a JS framework with a global <Image/> component.
In addition to setting to:
img {
background: white;
color: white;
}
I like to disable Firefox's default image behavoir as well:
img:-moz-loading {
visibility: hidden;
}
Could you place the dynamic names in the title attribute?
You could try a black background or black background image; maybe Firefox still uses a black text color.
Maybe img { color: white; } would do?
If you don't mind adding a little extra, here it is:
<img src = "283414_2114217089554_728204_nn.jpg" onload="this.setAttribute('alt','this is the alt of my image');" />
Hope that helps... :))
Rather than worrying about the alt function, you can give all your images a common class, say image-to-show and create a loading div absolutely positioned over this image. So, when the page loads, you only show the loading div, with a loading gif, something like this:
// show loading image
$('.loader').show();
Once the image is loaded, you can hide the div and show the image.
// main image loaded ?
$('.image-to-show').load(function(){
// hide/remove the loading image
$('.loader').hide();
});
You can further enhance this code by using specific image ID's. Another, cleaner way to do it would be to set data-loading to true for the images that are loading and once the images are loaded, set $('.image-to-show').data('loading', false)
There are multiple ways of tackling this, let me know if you need further clarification.
I'd start by adding this CSS, which will hide all images with alt text (not display: none because we want to undo this and we won't know what to undo to):
img[alt] {
width: 0;
height: 0;
}
And then showing it once it's all loaded (this uses jQuery):
$(document).ready(function() {
$('img[alt]').on('load', function() {
this.style.width = 'auto';
this.style.height = 'auto';
});
});
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.