The Problem
I have an object for my SVG which is wrapped in an anchor. The problem I face is that I want my SVG to have hover styles but I also need it to be clickable, hence the need for the anchor.
My Object:
<a href="http://mylink.co.uk">
<object data="mysvg.svg" type="image/svg+xml">
<span>Your browser doesn't support SVG images</span>
</object>
</a>
The problem is that the object is an element that has interaction and upon hover it was not registering the anchor. To combat this I tried:
object{
pointer-events: none;
}
This solved that issue and let the be the clickable element. The downside is now my objects hover styles don't work because technically the object is not longer the element I'm hovering.
Before the object...
I originally adopted the method of using the xlink method:
<a href="#" class="my-button">
<svg viewBox="0 0 297 149" class="my-icon">
<use xlink:href="svgsprite.svg#my-icon"></use>
</svg>
</a>
But I faced real issues getting the SVG parts to style consistently across browsers. Chrome in particular didn't like it.
Is there a way I can get the indivdual parts of my SVG styled via CSS, i.e. the fill colours and still use it in the way I'm trying to do by wrapping it within an anchor? Is there a newer (better) approach?
You can find a working example to demonstrate my problem a little better. Please find that here.
It's not exactly clear from your question what exactly you are trying to do (a test case would be useful).
But have you tried the approach of using an SVG <a> element, rather than an HTML one? Perhaps that will help you avoid the issues you are having.
<svg viewBox="0 0 297 149" class="my-icon">
<a xlink:href="http://mylink.co.uk" class="my-button">
<use xlink:href="svgsprite.svg#my-icon"></use>
</a>
</svg>
SVG inherits some styling properties from external <a> elements in slightly unexpected ways. That may be the source of your styling woes.
Related
I'm currently using clip-path on the image below. I stupidly didn't look at the browser support and found that it does not work in Edge or IE 11.
I'm wondering how or if possible I could create the below effect with just an SVG that will be supported in IE 11 and Edge.
I currently have been playing around with the below code but strugglign to understand how I can put a image over it like the image above.
<svg>
<path d="M0,60 L50,0 L420,0 A56,56 0 20,1 470,60z" fill="red" />
<a xlink:href="#">
<text x="410" y="37" font-size="18" font-weight="500" fill="yellow">Test</text>
</a>
</svg>
Really looking forward to your ideas.
Here is a rough idea (sorry for rough code as made it in a hurry) using pseudo elements ::before & ::after along with css3 transform and transition properties to achieve somewhat the result you are looking for. You can check it out and work around it if it helps. I checked it in FF and IE edge and 11 and 10 and it works well overall.
https://codepen.io/Nasir_T/pen/EvEMMG
Hope this helps gives your the idea or a work around the issue.
I'm trying to use a symbol from my defs.svg as a background image in CSS, as opposed to a direct path to an individual SVG file.
So instead of:
background: url(spoon.svg);
I want to do something like this:
background: url(defs.svg#spoon);
With #spoon being a symbol in defs.svg with id="spoon". Unfortunately, this isn't working for me. Has anyone come across a solution that doesn't involve custom JS/etc?
You'd need to define view and use tags inside your defs.svg so CSS would know where to look and what to show.
So, for example, say you have inside your SVG a symbol defined as this:
<symbol id="poop" viewBox="0 0 100 100">
<!-- Your shapes here -->
</symbol>
And before closing the svg tag, you must add the view and use defining tags:
<view id="poop-view" viewBox="0 0 100 100" /><!-- This ID used here is what you'll use in your CSS! -->
<use xlink:href="poop" width="100" height="100" x="0" y="0"></use>
Note that at this point, you can open your raw SVG file in a browser and it will show your drawing - before it showed blank!
And now you can set your SVG symbol in your CSS:
div{background-image:url("defs.svg#poop-view")} /* Remember, it's the ID used on your <view> def! */
Also, be sure your SVG includes a xmlns:xlink namespace on the opening tag, or it won't be supposed to work.
Disclaimer: I'm trying to use this setup at work hosting the SVG file on a server on my university, but for some reason this doesn't work (even SVG files won't show if <?xml>and <!DOCTYPE> tags are missing on the SVG), so be sure to check the sanity of your SVG file.
Find more about this on Jennifer Hiller's codepen blog.
So the new Picture element looks like this:
<picture>
<source ... />
<img browsers will fall back to this width="10" height="10" />
</picture>
In our CSS, we want to set say a background color.
picture {background-color: red};
img {background-color: yellow};
Will a Picture enabled browser just show a red background, while non enabled browsers show a yellow background? Or a combination of the two. Likewise, will an Picture enabled browser see the height/width attributes on the img element, or is the img element ignored completly?
The idea of the picture element is that that it simply provides source information for its enclosed img element, and that it is always the img element that is rendered, not the picture element.
However, I can't see anything normative in the spec that suggests that the picture element will be treated by default as anything other than an inline element, so I expect that you will be able to style it with a different display setting, give it padding etc., in the same way as you can do with span elements, in which case, the background-color will behave in the same way as a span element around an img element does today.
So targeting both might be appropriate. The backgrounds will simply layer as normal. But the img will be rendered, so in your scenario, the background behind the image will be yellow, assuming of course that the img has at least some degree of transparency.
Since no browser supports it, guess we'll need to wait to see the implementation, but by the looks of it so far, and according to current docs, it seems img tag will be completely ignored and only used as fallback.
The new implementation is as follows:
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
since you'll need to define the images inside <picture> element as sources and you won't have an img tag, implementation in browsers with Picture implementation shouldn't recognize anything inside an img tag unless the media src isn't defined.
However, it's easy to see this approach will cause a double download of images since browsers download all <img> tags first. Because of this, there's a proposal by David Newton: to use <object> or <embed> as fallback image containers to avoid duplication of images being downloaded.
All the above being said, we just need to wait, but in short, my answer is that your first option picture {background-color: red}; is the correct one
I have a good selection of SVG graphics on my site here
http://www.poipleshadow.com
They look crisp and I would love to continue using them, although I have a problem when i combine them with fallback for IE when they have links.
For example this is fine
<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>
But when I add the svg as an object and include a line for PNG support the link does not work anymore.
<a href="Goa-India-Map.htm" title="Goa Tourist Map">
<object type="image/svg+xml" data="Images/Buy-Items-To-Donate.svg" class="myimgleft">
<img src="Images/Buy-Items-To-Donate.png" width="200" height="156" alt="Give to charity - Donate to Street Children Charity" class="myimgleft">
</object>
</a>
I have searched and found that I could include the link in the SVG itself, although this means that the SVG would only link to a single address. Not ideal. Anyone know of a clean, basic, solution as I like to keep my site as basic as possible where ever I can just using HTML5 and CSS.
This is hacky, but I've used a trick from CSS Tricks in the past.
Unfortunately there's not a convenient anchor on that page to link to, but it looks like this:
.my-element {
background-image: url(fallback.png);
background-image: url(image.svg), none;
}
Apparently support of multiple backgrounds and SVG mostly overlap, so anything that doesn't support svg will use the top background-image while anything that does support svg will use the bottom. Clever, but like I said, hacky, and the best trick I know that doesn't use Modernizr.
CSS Tricks reports that "this works well in IE 6-8, but sadly not in Android 2.3 which supports multiple backgrounds but not SVG," so caveat emptor.
In reply to your comment below:
Your SVG looks like this right now:
<a href="index.htm">
<img src="Images/Poiple-Shadow.svg" width="32" height="32" alt="Poiple Shadow Charity Website" class="logo200">
</a>
In your stylesheet, you can add to class .logo200:
.logo200 {
background-image: url(Images/Poiple-Shadow.png); // make a png or jpg version of the image
background-image: url(Images/Poiple-Shadow.svg), none;
width: 32px; //give it width and height
height: 32px;
}
Now, instead of using an <img> tag, use a div:
<a href="index.htm">
<div class="logo200"></div>
</a>
The browser should show the SVG if it supports multiple backgrounds (and therefore svgs). If the browser does not support SVG, it likely doesn't support multiple backgrounds, so it will only show the first background-image property.
Well, this is a weird one.
I have web page with several svg images.
(I also detect not supported svg browsers and display a regular image instead, but I guess it is not relevant here).
Sometimes (I found it so far in Chrome OSX and Windows), the browser displays another svg instead of the one mentioned in the html .
Assuming I have to svg files linked from my page, logo.svg and logo2.svg, it might display logo2.svg intead of logo.svg.
I've inspected the elements , and all seems to be fine. HTML referes to one svg, while the browser displays a different svg (located on another part of the html) instead.
Any idea ?
<a href="Home">
<div style="float:left;width:170px;height:154px;">
<object class="svg-default" data="/images/logo.svg" type="image/svg+xml" style="width:100%; height:100%;z-index:1000;">
</object>
<img class="svg-fallback" src="/images/logo.png" style="width: 151px; height: 41px; display: none;">
</div>
</a>
Maybe you can dynamically insert the div element with the <object> as its child. And when you want to show another svg, remove the previous div & insert a new div with updated svg.