jQuery Plugin To Apply Custom CSS Styles To SVG - SVG.js
File Size: | 20.7 KB |
---|---|
Views Total: | 2545 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SVG.js is a lightweight and simple to use jQuery plugin which lets you apply custom CSS/CSS3 style to your SVG object. Supports both inline CSS styles and external style sheet.
Basic usage:
1. Link to jQuery library and the jQuery SVG.js plugin.
<script src="//code.jquery.com/jquery-2.2.2.min.js"></script> <script src="dist/jquery.svg.js"></script>
2. Embed your SVG into the webpage using HTML object
tag as follow:
<object id="demo" type="image/svg+xml" data="1.svg"></object>
3. Apply your own CSS to the SVG object.
$("#demo").setSVGStyle(Style); // or $("#demo").setSVGStyleLink('demo.css');
4. Get the SVG object and do something using jQuery functions.
var svg = $("#demo").getSVG(); svg.find("g path:first-child()").attr('fill', color);
This awesome jQuery plugin is developed by mberneti. For more Advanced Usages, please check the demo page or visit the official website.