This time I will share jQuery Plugin and tutorial about Change Styles Of Inline SVGs With jQuery SVGLite, hope it will help you in programming stack.
SVGLite is a tiny SVG manipulation jQuery plugin that dynamically changes the fill or stroke properties of an SVG image and makes it fully responsive regardless of how you resize the viewport.
How to use it:
1. Insert the SVGLite plugin after jQuery library.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/svglite-min.js"></script> |
2. Embed an SVG into the page.
3. Initialize the plugin on the SVG element and we’re ready to go.
1 |
$('#example').svglite({ |
4. Change the styles of your SVG element by adding or replacing CSS classes.
02 |
$('#path_id').pathclass('yourClass'); |
05 |
$('#path_id').pathclass('yourClass','add'); |
08 |
$('#path_id').pathclass(); |
11 |
$('#path_id').pathclass('yourClass','remove'); |
5. Add patterns to SVG paths.
02 |
$('#path_id').pathclass_pattern('yourClass'); |
05 |
$('#path_id').pathclass_pattern('yourClass','add'); |
08 |
$('#path_id').pathclass_pattern(); |
11 |
$('#path_id').pathclass_pattern('yourClass','remove'); |
2 |
<pattern id='yourPattern' width="1" height="1.3" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax slice"> |
3 |
<image xlink:href='bg.jpg' width="100" height="100" preserveAspectRatio="none"></image> |
1 |
#example path.yourClass { |
2 |
fill: url(#yourPattern); |
6. All default configuration options.
01 |
$('#example').svglite({ |
7. Global settings.
2 |
svglitedefs.resize['jqueryscript'] = 600; |
3 |
$('#svg').svglite({special:'jqueryscript'}); |
This awesome jQuery plugin is developed by kaitwalla. For more Advanced Usages, please check the demo page or visit the official website.
