Enthused by this article, I tried to apply a gradient clip-path to my relatively simple shape (an O letter converted to curves).
It works perfectly under Firefox, but as soon as I try it under a webkit, I see absolutely nothing.
I've tried to fix it, I've split it in simple parts, trying both Amit Sheen code with mine, and the only thing that make it fail is using my path instead of his. If I don't use clipPath, the path is rendered as expected, but as soon as I clip it, it just vanishes. I can't figure out what the problem is.
Can you help me?
.gradient {
width: 157px;
height: 157px;
background: linear-gradient(90deg, rgba(6,94,115,0.7959383582534576) 0%, rgba(207,241,255,1) 100%);
border-radius: 50%;
}
<svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
<clipPath id="clip">
<path d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
</clipPath>
<foreignObject x="470" y="150" width="157" height="157" clip-path="url(#clip)">
<div class="gradient" xmlns="http://www.w3.org/1999/xhtml"></div>
</foreignObject>
</svg>
You may need to transform your path so that it's left upper corner falls in the point (0,0). This is needed in chrome but won't work in firefox unless the foreign object has x="0" y="0". For this reason instead of giving a x and y attributes to the foreign object I translated it to the needed point.
svg{background:silver}
<svg viewBox="0 0 1000 400">
<foreignObject width="157" height="157" transform="translate(471,151)" clip-path="url(#clip)">
<div style="height:100%;background:gold"> </div>
</foreignObject>
<clipPath id="clip">
<path id="p" transform="translate(-471,-151)" d="M547.923,151.764C504.147,151.764 471.027,185.46 471.027,228.372C471.027,270.996 504.147,304.98 547.923,304.98C591.987,304.98 625.107,270.996 625.107,228.372C625.107,185.46 591.987,151.764 547.923,151.764ZM547.923,269.844C523.731,269.844 508.467,251.124 508.467,228.372C508.467,205.62 523.731,186.9 547.923,186.9C572.403,186.9 587.667,205.62 587.667,228.372C587.667,251.124 572.403,269.844 547.923,269.844Z" />
</clipPath>
</svg>
I edited my initial cry of despair into something more to the technical point, in order to turn it into a Q&A.
I'm using SVG symbols that I reference in the document with use elements. I'm styling these with CSS. I don't want to set both height and width in the CSS, I want to set only one of them with the other one scaling accordingly.
I do set a viewBox attribute on the symbol. But the graphic does not scale correctly.
<!DOCTYPE html>
<html>
<head>
<title>SVG Symbols</title>
<style>
body { margin: 20px; }
.svg-large { width: 500px; fill: yellow;}
</style>
</head>
<body>
<svg style="display:none;">
<symbol id="scary-smiley" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="9.5" stroke-width="1"
stroke="black" />
<circle cx="6" cy="7" r="1.5" fill="black"/>
<circle cx="14" cy="7" r="1.5" fill="black"/>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
width="10" height="5.2" x="5" y="11"/>
</symbol>
</svg>
<svg class="svg-large">
<use xlink:href="#scary-smiley"/>
</svg>
</body>
</html>
The code below has been tested in current Firefox, Chrome and a Webkit-based browser named Midori.
For some reason, defining the viewBox on the symbol element does not have the full desired effect in Firefox and Chrome. It does have some effect, though, as it makes the element scaleable. So, if you want set both width and height in CSS, you can do that.
If the viewBox element is specified only on the symbol and you set only one of width or height, then in Firefox and Chrome the other dimension is set according the default object size in HTML 5 whis is 300x150 px. So, in the example in the question, you get a 500x150 px element and the graphic is scaled to fit that rectangle.
If you want to define only one width or height with the other one scaling accordingly, then defining viewBox on the referencing SVG element works:
<!DOCTYPE html>
<html>
<head>
<title>SVG Symbols</title>
<style>
body { margin: 20px; }
.svg-large { width: 500px; fill: yellow;}
</style>
</head>
<body xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="display:none;">
<symbol id="scary-smiley">
<circle cx="10" cy="10" r="9.5" stroke-width="1"
stroke="black" />
<circle cx="6" cy="7" r="1.5" fill="black"/>
<circle cx="14" cy="7" r="1.5" fill="black"/>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
width="10" height="5.2" x="5" y="11"/>
</symbol>
</svg>
<svg class="svg-large" viewBox="0 0 20 20">
<use xlink:href="#scary-smiley"/>
</svg>
</body>
</html>
Firefox' and Chrome's behaviour is standard compliant, according to the SVG 2 specification, according to which the <svg><use .../></svg> clause establishes a new SVG viewport.
I have this simple HTML:
<html>
<body>
<embed src="test.svg" type="image/svg+xml" style="border:3px solid green;width:200px;height:200px;overflow:scroll;">
</body>
</html>
And a simple SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="border:3px solid red;width:500px;height:500px;overflow:auto;">
<circle cx="50" cy="250" r="80" stroke="green" stroke-width="4" fill="yellow" />
</svg>
The output from browsers:
[1,1] Edge: OK
[2,1] IE11: OK
[1,2] Chrome55: Not scrollable
[2,2] Firefox50: Scrollable at a negligible degree
How to ensure Firefox and Chrome able to have scrollable <embed> with overflow-ed SVG content, as in Edge and IE?
Thank you.
just put a div around the embed und use that as scrolling area...
<html>
<body>
<div style="border:3px solid green;width:100px;height:100px;overflow:scroll;">
<embed src="https://upload.wikimedia.org/wikipedia/commons/e/e9/SVG-Grundelemente.svg" type="image/svg+xml">
</div>
</body>
</html>
to match the behaviour of MS browsers, you have to extend your viewBox to contain all elements you want to be able to scroll to...
given the appropiate width and height should do want you want then...
You can as well roll your own zoom and pan solution using svgDocuments currentTranslate and currentScale properties... I would be curious how currentTranslate behaves for this weird MS behaviour...
I have read all post in here about styling my svg fill color with CSS but without luck.
What I want is to able to make an icon with a link. My external svg file is grey, but I would like to make it red with css and change color to yellow when hovering.
I think I am targeting the SVG wrong. Please help. My test is here:
testpage
<%#LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<style type="text/css">
<!--
.svgicon {
fill: red;
}
.svgicon:hover {
fill: yellow;
}
-->
</style>
<body>
<table width="100%" border="0" class="tabelform">
<tr>
<td width="100%"><object type="image/svg+xml" data="S/Images/new.svg" height="18" width="18"></object>test icon</td>
</tr>
</table>
</body>
</html>
Answer a little overdue, but worth having for reference for others.
Basically, the only type of SVG usage which can be used in conjunction with CSS is the inline usage.
This means you would literally put your SVG markup directly into the HTML source as follows:
<div class="my-svg">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
<title>
Expand
</title>
<path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
</svg>
</div>
NOTE: This SVG has been optimised using SVGO and then manually edited to include and ID
You can now control the SVG using CSS like so:
.my-svg {
fill: pink;
}
.my-svg:hover {
fill: red;
}
currentColor
You can also use the currentColor keyword in the SVG to apply a colour to certain elements of it, for example:
<div class="my-svg">
<svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<title>
Current Event
</title>
<g fill="none" fill-rule="evenodd">
<circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
<ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
</g>
</svg>
</div>
.my-svg {
color: red;
}
JS Fiddle
This can be handy if you need to use the same SVG across different websites / themes, such as dark and light, for easily switching SVG colours with CSS.
Caching / performance consideration: SVG cloning
You should also keep in mind, it's not a good idea to use inline SVG for repetitive images, such as icons, because they can not be cached (the SVG code will be repeated throughout your HTML, increasing the ultimate file size).
Instead, one approach I like to use is to create an SVG index at the top of my page, which contains all the SVGs I want to use on the page, for example:
<svg xmlns="http://www.w3.org/2000/svg" class="svg-index">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
<title>
Expand
</title>
<path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
</svg>
<svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<title>
Current Event
</title>
<g fill="none" fill-rule="evenodd">
<circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
<ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
</g>
</svg>
</svg>
Make sure you set the SVG index to display: none so it doesn't show up on the page.
You can now reuse these SVGs repetitively throughout the page using the xlink:href attribute as follows:
<svg class="dropDown">
<use xlink:href="#SVG-dropdown-icon" />
</svg>
<svg class="active">
<use xlink:href="#SVG-active-icon" />
</svg>
<svg class="active">
<use xlink:href="#SVG-active-icon" />
</svg>
<svg class="dropDown">
<use xlink:href="#SVG-dropdown-icon" />
</svg>
JS Fiddle
This is called cloning, and allows you to take advantage of cacheable SVGs which can be controlled with CSS!
Hope this helps!
try to use inline svg instead of external svg source then you can control
Is there a way in SVG to draw a line that keeps thin when the image is stretched?
I'm using a SVG image as a CSS background, something like this:
<svg ... preserveAspectRatio="none" viewBox="0 0 15 15">
<line x1="0" y1="15" x2="15" y2="0"
color="#000" stroke="#333" stroke-width="1" />
</svg>
(A diagonal line). I'm stretching this image through a rectangular element, and when the element is bigger, the line gets thicker, but I need an always-thin line.
Possible? Something like "thin" lines in flash.
In browsers that implement SVG 1.2T you can have a non-scaling stroke Opera and Webkit support this as does Firefox from version 15.
<!-- via property -->
<line … vector-effect="non-scaling-stroke" />
<!-- via CSS -->
<style>
line { vector-effect:non-scaling-stroke }
</style>
<line … />