I have a CSS property of fill applied on SVG. But that SVG is inside the anchor tag which has a property of color. Everything looks fine in Chrome but when i open the page in Firefox the SVG is taking the color property of the anchor tag to fill the SVG. Can anyone explain why is this happening?
<a>
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#icon-tag"></use>
</svg> Special Offers
</a>
a{
color:#somecolor;
}
svg{
fill:#somecolor;
}
PS: fill is not getting overridden by color property. And i am fetching the svg from svg sprites file.
Related
Is there an (elegant) way to draw a path with "negative" stroke colour?
What I mean is if i have some element in an HTML document (e.g. a <canvas> or an <img>, and I overlay it with an <svg> element. And I want to draw a path in that <svg> element. I want the stroke colour to automatically be the negative of whatever is under that path. Of course, this means the colour of each pixel of the path changes as it passes over different parts of the <img> element underneath the <svg> element.
You can use mix-blend-mode:difference property to draw path by inverted colors of backward elements(img, canvas and so on), like this.
HTML
<div class="wrapper">
<img src="http://jsrun.it/assets/G/H/X/X/GHXXX.png">
<svg width="500px" height="500px">
<path d="M50,50l400,400" stroke-width="100" stroke="#fff"/>
</svg>
</div>
CSS
.wrapper{
position:relative;
}
.wrapper *{
position:absolute;
}
.wrapper path{
mix-blend-mode:difference;
}
http://jsdo.it/defghi1977/8JKE
I saved an .svg from Photoshop with the dimensions I want it to appear as by default. It appeared fine on the page using the following markup, but was blurry.
<object type="image/svg+xml" data="~/Assets/images/premium-feature-star.svg" class="premiumFeatureButton"></object>
So, I re-saved the .svg in larger dimensions from Photoshop (overwriting the existing image), and I tried setting the viewBox attribute in the .svg to the dimensions I want the image to appear as, (see the code below). Now I don't see the image appear on my web page. Here's the .svg code:
(I've tried removing the image width and height from the svg code below)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 21 21">
<image id="Layer_0" data-name="Layer 0" x="5" y="5" width="385" height="385" xlink:href="data:img/png;base64,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"/>
</svg>
When I look at my webpage, I see that the .svg is still scaled to it's original dimensions:
Here's the css (which was displaying the old .svg correctly):
.premiumFeatureButton {
position: absolute;
top: 408px;
left: 380px;
z-index: 3;
}
The element is contained within a div. I've tried setting height and width of the containing div as percentages.
Here's the div that the .svg is contained in:
I needed to set height and width on the svg and the image contained inside the svg, to the desired pixel dimensions. I also set the svg viewBox attribute (which specifies that the visible area of the svg should be from the top left corner (0 0) to the bottom right corner (21 21) of the svg:)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 21 21">
<image id="Layer_0" data-name="Layer 0" width="21" height="21"
I am trying to use an svg from an external source in my html. Let's say I have this svg:
https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg
I found many ways to do this, including:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
But unfortunately, the styling I have to use applies to svg tags. If I use this for example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg"/>
</svg>
It won't show up on my page, I just get an empty white square! Is there anyway I can do this inside svg tags? Thanks!
You have to specify a width and height for your svg to display properly:
<svg width="90" height="90">
<image xlink:href="your.svg" src="yourfallback.png" width="90" height="90"/>
</svg>
Update
You can do this via CSS too of course, but you have to be sure that your <image> tag has width and height set in your CSS if you don't specify the html attributes directly:
svg {
width: 150px;
height: 150px;
}
image {
width: 100px;
height: 100px;
}
This will set the size of your actual image (the svg) to 100px * 100px, but has a "wrapper" of 150px. Regarding to your comment to your original question, maybe that's why you don't see your image, because you dont have set a width / height and only styles which apply to your wrapping element (<svg>)
Example Fiddle: https://jsfiddle.net/7334vrmq/
Hope this helps.
I have created an ellipse in SVG with a stroke-width and stroke but the top and left sides of the stroke are truncated. They appear to be overflowing outside of the containing svg tag. I tried using overflow:visible; property on the SVG but it still doesn't work.
Following is my HTML:
<div id="div1">
<svg id="svg1">
<ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114"></ellipse>
</svg>
</div>
And this is its CSS:
#div1 {
padding:10px;
margin:10px;
}
#svg1 {
overflow:visible;
margin-left:86.4305555339479;
margin-top:-4.409722221119791;
}
#oval1 {
fill:hsl(50.7692307692305,27.6595744680847%,68.0882352941177%);
stroke-width:5.291666665343749;
stroke:hsl(79.5918367346938,41.8803418803418%,40.5882352941176%);
}
You can see the running code here as well.
I have had a similar problem with rectangles in the past and they got fixed after using overflow:visible; for the containing svg. But it doesn't seems to be working for ellipses now.
Can anyone help me fix the issue?
Thnx in advance!
UPDATE: Looks like there are active bug for this behaviour in at least Chrome (https://code.google.com/p/chromium/issues/detail?id=231577) and has been for Firefox as well (https://bugzilla.mozilla.org/show_bug.cgi?id=378923). So depending on version you might be out of luck. As of writing this is not fixed in Chrome (32.0.1700.6 beta) and there is a fiddle you can use to test with here: http://jsfiddle.net/HRsvX/36/ all three triangles should be fully visible if the browser implements the current SVG 1.1 spec. Fiddle reproduced below.
The circle inner area is bordering the SVG element. Before HTML5t the SVG element itself is like an image or flash movie, it can't overflow into the html document, it has it's own canvas so to speak. When you add stroke (that by default is outside the area you defined) the stroke will end up outside the SVG canvas. You'll have to account for that in the centering of the circle:
The center has to be the radius+stroke width so your center x for example would have to be 164.041666625656 + 5.291666665343749 minimum to fully fit inside the SVG.
If you specify the HTML5 doctype and use an inline SVG as in your example it should show the overflowing content since the default value for overflow is visible and HTML5 allows for overflow on inline SVG elements.
So either check your doctype or reposition the center to account for the stroke width.
More on the overflow of SVG elements can be found in Mozilla developer documents and a nice piece on this MSDN blog that explains the default overflow.
HTML
<div><svg height="100" width="100" viewbox="00 0 100 100">
<path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>
<div><svg id="clip1" height="100" width="100" viewbox="00 0 100 100">
<path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>
CSS
div {
height:100px; width:100px;
margin:1em auto;
border: solid 1px black;
}
svg { overflow:visible }
#clip1 {clip: rect(-10px,-10px,-10px,-10px)} //nope
#clip2 {clip: auto} //nope
Add a viewBox that describes the content of the SVG. The browser will then ensure that the entire ellipse and its stroke are visible. If you want it renderered at 1:1, you will also need to add an equivalent width and height.
<svg id="svg1" width="335" height="199" viewBox="-3 -3 335 199">
<ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114" />
</svg>
Demo here
This is a part of my HTML I have embedded the SVG element.
<div>
<embed id="svgsource" type="image/svg+xml" src="/CXF/2012-01-27---11-35-47/6.svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="900px" height="751px" onload="init()" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
</embed>
</div>
But when you go to this page, you notice a visible line on top of the SVG element, as if it has set a top border:
is there any way to get rid of that?
Why do you have an inline <svg> element inside the <embed>? Have you tried removing that part?
Maybe the svg you reference has a rectangle to serve as a border? In that case you'll need to change the "/CXF/2012-01-27---11-35-47/6.svg" file itself.