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.
Related
I noticed that the SVG attribute dominant-baseline behaves different in Chrome and Firefox.
The vertical alignment is not exactly the same for dominant-baseline="hanging". In Firefox, the gap between the path and the text is slightly bigger than in Chrome.
In Chrome 76.0.3809.132
In Firefox 69.0.1
I already read dominant-baseline doesn't work in Firefox but it doesn't seem to apply here since the attribute is directly on the <text> element.
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<path d="M20,20 L180,20" stroke="grey" />
<text dominant-baseline="hanging" x="30" y="20">Hanging</text>
</svg>
Example taken from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline.
I would expect the vertical alignment to be the same across browsers but it's not. Any idea why ?
I ran into this as well.
It seems it was a known bug in FireFox but has been fixed (in v82 Aug-2020 as much as I can see).
So it looks fine in latest FireFox (87.0):
Html code in Stackblitz
I ran into it because some test automation tools (eg. Percy) still using old firefox version.
For some reason element
<svg width="1000" height="500" transform="rotate(180)">...</svg>
is shown as not rotated in Safari 11.
Chrome 63 renders it properly.
What's the problem?
Thanks!
In SVG 1.1 <svg> elements did not support transform attributes. In SVG 2 it is proposed that they should.
Chrome and Firefox implement this part of the SVG 2 specification, Safari does not yet do so and IE11 never will.
You can achieve the same result in browsers that do not support this SVG 2 feature either by replacing the <svg> element by a <g> element or by creating an <g> child element on the <svg> element and putting the transform on the <g> element.
Browsers allow you to use CSS on the SVG-elements, so an easy fix is to use the CSS transform instead.
<!-- ( works on all elements ) -->
<path style="transform:rotate(180deg)" />
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.
I have created SVG code from coreldraw and want to place it inline in my HTML5 document and have a couple of queries.
How universal is SVG now-a-days? Any suggestions on backwards compatibility?
I have taken out the style data from the svg and put that into my css, I guess that's not a problem - or is it? I also added a hover rule...
.Borderline {stroke:#0099FF;stroke-width:7.45541;stroke-linejoin:round}
.BorderFill1 {fill:#71C6FF}
.BorderFill2 {fill:#CBEAFF}
.BorderFill1:hover {fill: green; }
Can I remove any of the following data that is not needed. (but I want it to work and look the same)
<svg xmlns="http://www.w3.org/2000/svg" class="myimgleft" xml:space="preserve" width="100px" height="105px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 92 97" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path class="BorderFill1 Borderline" d="M55 51c10,0 18,0 24,0 4,-5 9,-10 9,-15 0,-6 0,-22 0,-32l-16 14c-5,-4 -8,-6 -17,-14l0 47z"/>
<path class="BorderFill2 Borderline" d="M79 51c-5,-1 -41,0 -47,0l0 -14c-8,8 -25,25 -28,28l28 28 0 -13c7,0 11,1 17,-2 6,-2 23,-21 30,-27z"/>
</g>
</svg>
Any other hints / tips that might be useful are very welcome.
1 MDN keeps an accurate list of compatibility per-element. Here's the list for SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
Feature Chrome Firefox (Gecko) IE Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
2 Keep the style in your SVG - it'll make it easier to swap out for other SVG images later. You want to be able to quickly update your svg. This one is more a matter of preference.
3 I wouldn't get in the habit of tweaking vector-art exported from CorelDraw by hand. You may think to run it through a minifier, but hand-tuning is almost certainly more work than it's worth.
Here's the first minifier Google gives me:
http://petercollingridge.appspot.com/svg-optimiser
For cases where you're not inlining, you can give .svgz (compressed svg) a shot, which will make it significantly smaller: https://graphicdesign.stackexchange.com/questions/24797/when-should-i-use-svg-or-svgz-for-my-web-graphics
4 Hmm, other tips - well good on you for using vector art on your site. Too many web devs/designers take the shortcut of doing everything in raster. While that gets you a nice looking image for a demo, in the long run it's really hurting your site. With ubiquitous tablets + phones, pinch + zoom is everywhere and your images need to scale nicely.
Personally, I've never loved the idea of inlining svg - I've always preferred saving as .svg and src-ing it like an image. I see why you are inlining it, though, as you're using some hovers.
I am trying to resize an svg to the exact size which I want it (32x32).
Look at the example at http://jsfiddle.net/Uy94k/6/
This fiddle is a short outtake of a larger .svg file which I include in my html file and refeer to which image I want using:
<svg class="small" viewBox="0 0 512 512" preserveAspectRatio="none">
<g filter="">
<use xlink:href="#login"></use>
</g>
</svg>
(Any easier way to do this by the way?).
As you can see, I've tried using preserveAspectRatio, but without luck. I've also tried different styling techniques (ie. sizing in span tags outside the svn, styling in the svn tags, fiddling with height both in and where I call it by id.).
If you use a developer tool to look at the height/width of the images in the fiddle, you will see that it is 26x20.. But why is that?
Tweeking the viewBox values (guessing the value of viewBox="120 70 340 340" in this case) kinda did the trick. But it is error prone, not nice, and tedious to tweek the parameters.. Look at the example at http://jsfiddle.net/veZSX/1/ for a tweeked vs untweeked version.
There must be a better way?