Преобразование тега img с svg изображением в svg объект для последующей манипуляции со стилями svg через css
Все чаще использую svg в верстке и возникла ситуация, когда необходимо менять стили внутри svg изображения. При обычном встраивании через тег <img> невозможно манипулировать через css со стилями. Внедрять объект svg приносит свои неудобства (по крайней мере для меня), поэтому на просторах интернета был найден скрипт, который в случае, если к тегу <img> задан class=»svg» — преобразовывает тег <img> в объект svg на клиенте.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /* * Replace all SVG images with inline SVG */ jQuery('img.svg').each(function () { var $img = jQuery(this); var imgID = $img.attr('id'); var imgClass = $img.attr('class'); var imgURL = $img.attr('src'); jQuery.get(imgURL, function (data) { // Get the SVG tag, ignore the rest var $svg = jQuery(data).find('svg'); // Add replaced image's ID to the new SVG if (typeof imgID !== 'undefined') { $svg = $svg.attr('id', imgID); } // Add replaced image's classes to the new SVG if (typeof imgClass !== 'undefined') { $svg = $svg.attr('class', imgClass + ' replaced-svg'); } // Remove any invalid XML tags as per http://validator.w3.org $svg = $svg.removeAttr('xmlns:a'); // Check if the viewport is set, if the viewport is not set the SVG wont't scale. if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) { $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')) } // Replace image with new SVG $img.replaceWith($svg); }, 'xml'); }); |