Updated @ 2015-10-12: The following snippet could get rid of the broken icon without using CSS and JS.
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
<image width="1920" height="500" xlink:href="" ng-href="{{ image.href }}"></image>
</svg>
Thanks Wouter De Loose.
–
i have the following <svg> in an AngularJS template and the image source would be assigned by the controller which loaded the image info from a .json file.
<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
<image width="1920" height="500" xlink:href="{{ image.href }}"></image>
</svg>
It works fine on my local machine but when i put it on a webserver. There would be a flash of the broken image before the image is loaded. Continue reading HTML – Hide the broken icon when the is not yet loaded →
<img src="Error.src" onerror="this.style.display='none'"/>
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
The above method also works for the <image> in <svg>.
Reference: StackOverflow – How to hide image broken Icon using only CSS/HTML (without js)
I am working on an AngularJS project with html5mode enabled. I would like to implement the Card Expansion effect written on Codrops. Everything works fine but the SVG clip-path animation doesn’t work.
This is because i have ended the <base> tag in the index.html for the html5mode so the clip-path value has to be an absolute path. i.e.
<!-- fail with base tag -->
<image clip-path="url(#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>
Change to
<!-- it works! -->
<image clip-path="url(http://localhost:10000/project#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>
If you want it to work on IE, please refer to the post in the reference.
Done =)
Reference: StackOverflow – Svg clipPath in AngularJS app with url in hashbang mode
Dream BIG and go for it =)