Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Change an SVG file through the URL hash
/**
* Change an SVG file through the URL hash
* Warning: Does NOT work on WebKit.
*/
body {
background: silver;
}
.logo {
width: 100px; height: 100px;
background: url('http://lea.verou.me/logo-multicolor.svg#black') no-repeat;
}
.logo:hover {
background-image: url('http://lea.verou.me/logo-multicolor.svg#white');
}
.logo:active {
background-image: url('http://lea.verou.me/logo-multicolor.svg#');
}
<h1>Inside an &lt;img>:</h1>
<img src="http://lea.verou.me/logo-multicolor.svg" />
<img src="http://lea.verou.me/logo-multicolor.svg#white" />
<img src="http://lea.verou.me/logo-multicolor.svg#black" />
<h1>As a background on a &lt;div>:</h1>
<div class="logo"></div>
<h1>Through &lt;object> tags:</h1>
<object data="http://lea.verou.me/logo-multicolor.svg"></object>
<object data="http://lea.verou.me/logo-multicolor.svg#black"></object>
<object data="http://lea.verou.me/logo-multicolor.svg#white"></object>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
@chee

This comment has been minimized.

Copy link

commented Mar 19, 2013

do you know y does this not work on webkit?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.