Jak zmienić kolor obrazu SVG za pomocą CSS (jQuery SVG image replacement)?
Jest to samo Q&A poręcznego kawałka kodu, który wymyśliłem.
Obecnie nie ma łatwego sposobu osadzenia obrazu SVG, a następnie uzyskania dostępu do elementów SVG za pomocą CSS. Istnieją różne metody używania frameworków JS SVG, ale są one zbyt skomplikowane, jeśli robisz tylko prostą ikonę ze stanem najazdu.
Oto, co wymyśliłem, co moim zdaniem jest zdecydowanie najłatwiejszym sposobem użycia plików SVG na stronie internetowej. Bierze swoją koncepcję od wczesnych metody wymiany tekstu na obraz, ale o ile mi wiadomo, nigdy nie zostały wykonane dla SVGs.
Oto jest pytanie:
Jak osadzić plik SVG i zmienić jego kolor w CSS bez użycia frameworka JS-SVG?
17 answers
Najpierw użyj znacznika IMG w HTML, aby osadzić grafikę SVG. Do wykonania grafiki użyłem Adobe Illustrator.
<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>
Tak samo jak osadzić normalny obraz. Zauważ, że musisz ustawić IMG, aby miał klasę svg. Klasa "social-link"to tylko przykłady. Identyfikator nie jest wymagany, ale jest przydatny.
Następnie użyj tego kodu jQuery(w osobnym pliku lub w linii w nagłówku).
/*
* 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');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
To, co robi powyższy kod, to szukanie wszystkich IMG z klasą "svg" i zastąp go inline SVG z połączonego pliku. Ogromną zaletą jest to, że pozwala na użycie CSS do zmiany koloru SVG teraz, jak tak:
svg:hover path {
fill: red;
}
Kod jQuery, który napisałem, również obsługuje oryginalne ID obrazów i klasy. Więc ten CSS też działa:
#facebook-logo:hover path {
fill: red;
}
Lub:
.social-link:hover path {
fill: red;
}
Przykład tego działania można zobaczyć tutaj: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
Mamy bardziej skomplikowaną wersję to obejmuje buforowanie tutaj: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-01 18:55:16
Style
svg path {
fill: #000;
}
Skrypt
$(document).ready(function() {
$('img[src$=".svg"]').each(function() {
var $img = jQuery(this);
var imgURL = $img.attr('src');
var attributes = $img.prop("attributes");
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Remove any invalid XML tags
$svg = $svg.removeAttr('xmlns:a');
// Loop through IMG attributes and apply on SVG
$.each(attributes, function() {
$svg.attr(this.name, this.value);
});
// Replace IMG with SVG
$img.replaceWith($svg);
}, 'xml');
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-01 09:21:15
Jeśli możesz dołączyć pliki (PHP include lub include za pośrednictwem wybranego CMS) na swojej stronie, możesz dodać kod SVG i dołączyć go do swojej strony. Działa to tak samo, jak wklejenie źródła SVG do strony, ale sprawia, że znaczniki strony są czystsze.
Zaletą jest to, że możesz kierować części SVG za pomocą CSS do najechania kursorem-nie wymaga javascript.
Http://codepen.io/chriscoyier/pen/evcBu
Wystarczy użyć reguły CSS takiej jak Ta:
#pathidorclass:hover { fill: #303 !important; }
Zauważ, że bit !important jest niezbędny do nadpisania koloru wypełnienia.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-01 16:01:10
Alternatywnie możesz użyć CSS mask, przyznane wsparcie przeglądarki nie jest dobre, ale możesz użyć awaryjnego
.frame {
background: blue;
-webkit-mask: url(image.svg) center / contain no-repeat;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-18 19:21:46
Możesz teraz używać właściwości CSS filter w większości nowoczesnych przeglądarek (w tym Edge, ale nie IE11). Działa zarówno na obrazach SVG, jak i innych elementach. Możesz użyć funkcji odcień-rotate lub invert, aby modyfikować kolory, chociaż nie pozwalają one na modyfikowanie różnych kolorów niezależnie. Używam poniższej klasy CSS, aby pokazać "wyłączoną" wersję ikony (gdzie oryginał jest obrazkiem SVG z nasyconym kolorem):
.disabled {
opacity: 0.4;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
To sprawia, że jest jasnoszary w większości przeglądarek. W IE (i prawdopodobnie Opera Mini, której nie testowałem) jest zauważalnie wyblakła przez właściwość opacity, która nadal wygląda całkiem dobrze, chociaż nie jest szara.
Oto przykład z czterema różnymi klasami CSS dla ikony dzwonka Twemoji : oryginalna (żółta), powyższa Klasa "wyłączona", hue-rotate (zielona) i invert (niebieska).
.twa-bell {
background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
height: 3em;
width: 3em;
margin: 0 0.15em 0 0.3em;
vertical-align: -0.3em;
background-size: 3em 3em;
}
.grey-out {
opacity: 0.4;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.hue-rotate {
filter: hue-rotate(90deg);
-webkit-filter: hue-rotate(90deg);
}
.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span class="twa-bell"></span>
<span class="twa-bell grey-out"></span>
<span class="twa-bell hue-rotate"></span>
<span class="twa-bell invert"></span>
</body>
</html>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-28 19:10:37
@Drew Baker dał świetne rozwiązanie, aby rozwiązać problem. Kod działa poprawnie. Jednak ci, którzy używają AngularJs mogą znaleźć wiele zależności od jQuery. W związku z tym pomyślałem, że dobrym pomysłem jest wklejenie dla użytkowników AngularJS kodu podążającego za rozwiązaniem @ Drew Baker.
AngularJs sposób o tym samym kodzie
1. Html : użyj znacznika poniżej w pliku html:
<svg-image src="/icons/my.svg" class="any-class-you-wish"></svg-image>
2. Dyrektywa: będzie to dyrektywa, którą będziesz musiał uznać Tag:
'use strict';
angular.module('myApp')
.directive('svgImage', ['$http', function($http) {
return {
restrict: 'E',
link: function(scope, element) {
var imgURL = element.attr('src');
// if you want to use ng-include, then
// instead of the above line write the bellow:
// var imgURL = element.attr('ng-include');
var request = $http.get(
imgURL,
{'Content-Type': 'application/xml'}
);
scope.manipulateImgNode = function(data, elem){
var $svg = angular.element(data)[4];
var imgClass = elem.attr('class');
if(typeof(imgClass) !== 'undefined') {
var classes = imgClass.split(' ');
for(var i = 0; i < classes.length; ++i){
$svg.classList.add(classes[i]);
}
}
$svg.removeAttribute('xmlns:a');
return $svg;
};
request.success(function(data){
element.replaceWith(scope.manipulateImgNode(data, element));
});
}
};
}]);
3. CSS:
.any-class-you-wish{
border: 1px solid red;
height: 300px;
width: 120px
}
4. Test jednostkowy z karmą-jasmine :
'use strict';
describe('Directive: svgImage', function() {
var $rootScope, $compile, element, scope, $httpBackend, apiUrl, data;
beforeEach(function() {
module('myApp');
inject(function($injector) {
$rootScope = $injector.get('$rootScope');
$compile = $injector.get('$compile');
$httpBackend = $injector.get('$httpBackend');
apiUrl = $injector.get('apiUrl');
});
scope = $rootScope.$new();
element = angular.element('<svg-image src="/icons/icon-man.svg" class="svg"></svg-image>');
element = $compile(element)(scope);
spyOn(scope, 'manipulateImgNode').andCallThrough();
$httpBackend.whenGET(apiUrl + 'me').respond(200, {});
data = '<?xml version="1.0" encoding="utf-8"?>' +
'<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' +
'<!-- Obj -->' +
'<!-- Obj -->' +
'<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' +
'width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">' +
'<g>' +
'<path fill="#F4A902" d=""/>' +
'<path fill="#F4A902" d=""/>' +
'</g>' +
'</svg>';
$httpBackend.expectGET('/icons/icon-man.svg').respond(200, data);
});
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should call manipulateImgNode atleast once', function () {
$httpBackend.flush();
expect(scope.manipulateImgNode.callCount).toBe(1);
});
it('should return correct result', function () {
$httpBackend.flush();
var result = scope.manipulateImgNode(data, element);
expect(result).toBeDefined();
});
it('should define classes', function () {
$httpBackend.flush();
var result = scope.manipulateImgNode(data, element);
var classList = ["svg"];
expect(result.classList[0]).toBe(classList[0]);
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-23 08:18:55
Zdaję sobie sprawę, że chcesz to osiągnąć za pomocą CSS, ale tylko przypomnienie na wypadek, gdyby był to mały, prosty obrazek - zawsze możesz go otworzyć w Notepad++ I zmienić ścieżkę / cokolwiek innego:
<path style="fill:#010002;" d="M394.854,205.444c9.218-15.461,19.102-30.181,14.258-49.527
...
C412.843,226.163,402.511,211.451,394.854,205.444z"/>
...nawet zamiana wielu obrazów svg może mieć mniejszy rozmiar niż niektóre fragmenty kodu dla tego pytania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-31 21:03:32
Napisałem dyrektywę, aby rozwiązać ten problem z AngularJS. Jest on dostępny tutaj-ngReusableSvg .
Zastępuje element SVG po jego wyrenderowaniu i umieszcza go wewnątrz elementu div, dzięki czemu jego CSS jest łatwo zmienialny. Pomaga to używać tego samego pliku SVG w różnych miejscach przy użyciu różnych rozmiarów/kolorów.
Użycie jest proste:
<object oa-reusable-svg
data="my_icon.svg"
type="image/svg+xml"
class="svg-class"
height="30" // given to prevent UI glitches at switch time
width="30">
</object>
Po tym, można łatwo mieć:
.svg-class svg {
fill: red; // whichever color you want
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-16 20:21:10
Oto wersja dla knockout.js na podstawie zaakceptowanej odpowiedzi:
Ważne: to faktycznie wymaga jQuery zbyt do zastąpienia, ale pomyślałem, że może być przydatne dla niektórych.
ko.bindingHandlers.svgConvert =
{
'init': function ()
{
return { 'controlsDescendantBindings': true };
},
'update': function (element, valueAccessor, allBindings, viewModel, bindingContext)
{
var $img = $(element);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function (data)
{
// Get the SVG tag, ignore the rest
var $svg = $(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');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
}
};
Następnie po prostu zastosuj {[2] } do tagu img.
To rozwiązanie całkowicie zastępuje znacznik img znacznikiem SVG i wszelkie dodatkowe powiązania nie będą przestrzegane.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-01 02:53:15
Tutaj nie ma kodu frameworka, tylko czysty js :
document.querySelectorAll('img.svg').forEach(function(element) {
var imgID = element.getAttribute('id')
var imgClass = element.getAttribute('class')
var imgURL = element.getAttribute('src')
xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var svg = xhr.responseXML.getElementsByTagName('svg')[0];
if(imgID != null) {
svg.setAttribute('id', imgID);
}
if(imgClass != null) {
svg.setAttribute('class', imgClass + ' replaced-svg');
}
svg.removeAttribute('xmlns:a')
if(!svg.hasAttribute('viewBox') && svg.hasAttribute('height') && svg.hasAttribute('width')) {
svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
}
element.parentElement.replaceChild(svg, element)
}
}
xhr.open('GET', imgURL, true)
xhr.send(null)
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-17 10:22:32
Istnieje biblioteka open source o nazwie SVGInject, która używa atrybutu onload do uruchomienia iniekcji. Możesz znaleźć projekt GitHub na https://github.com/iconfu/svg-inject
Oto minimalny przykład użycia SVGInject:
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
Po załadowaniu obrazu onload="SVGInject(this) uruchomi zastrzyk, a element <img> zostanie zastąpiony zawartością pliku SVG podanego w atrybucie src.
Rozwiązuje kilka problemów z SVG iniekcja: {]}
SVG można ukryć do czasu zakończenia wstrzyknięcia. Jest to ważne, jeśli styl jest już zastosowany podczas ładowania, co w przeciwnym razie spowodowałoby krótki "niestyled content flash".
Elementy
<img>wstrzykują się automatycznie. Jeśli dodasz SVGs dynamicznie, nie musisz się martwić o ponowne wywołanie funkcji wtrysku.Losowy ciąg jest dodawany do każdego identyfikatora w SVG, aby uniknąć wielokrotnego posiadania tego samego identyfikatora w dokument, jeśli SVG zostanie wstrzyknięty więcej niż jeden raz.
SVGInject jest zwykłym Javascript i działa ze wszystkimi przeglądarkami obsługującymi SVG.
Uwaga: jestem współautorem SVGInject
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-04 16:04:04
Jeśli mamy większą liczbę takich obrazów svg, możemy również skorzystać z pomocy font-files.
Strony podobne do https://glyphter.com / może nam pobrać plik czcionki z naszych plików SVG.
Np.
@font-face {
font-family: 'iconFont';
src: url('iconFont.eot');
}
#target{
color: white;
font-size:96px;
font-family:iconFont;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-07 19:25:46
Ponieważ SVG jest w zasadzie kodem, potrzebujesz tylko treści. Użyłem PHP, aby uzyskać zawartość, ale możesz użyć, co chcesz.
<?php
$content = file_get_contents($pathToSVG);
?>
Następnie wydrukowałem zawartość "tak jak jest" wewnątrz kontenera div
<div class="fill-class"><?php echo $content;?></div>
To finnaly set rule to container ' s SVG childs on CSS
.fill-class > svg {
fill: orange;
}
Otrzymałem wyniki z ikonką materiału SVG:
- Mozilla Firefox 59.0.2 (64-bit) Linux
- Google Chrome66.0.3359.181 (Build oficial) (64 bits) Linux
- Opera 53.0.2907.37 Linux
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-06 20:17:41
Wybrane rozwiązanie jest w porządku, jeśli chcesz, aby jQuery przetwarzał wszystkie elementy svg w Twoim DOM i twój DOM ma rozsądny rozmiar. Ale jeśli DOM jest duży i zdecydujesz się na dynamiczne ładowanie części DOM, nie ma sensu przeskanować całego DOM tylko po to, aby zaktualizować elementy svg. Zamiast tego użyj wtyczki jQuery:
/**
* A jQuery plugin that loads an svg file and replaces the jQuery object with its contents.
*
* The path to the svg file is specified in the src attribute (which normally does not exist for an svg element).
*
* The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object's
* underlying html. Note: All other attributes in the original element are lost including the style attribute. Place
* any styles in a style class instead.
*/
(function ($) {
$.fn.svgLoader = function () {
var src = $(this).attr("src");
var width = this.attr("width");
var height = this.attr("height");
var cls = this.attr("class");
var ctx = $(this);
// Get the svg file and replace the <svg> element.
$.ajax({
url: src,
cache: false
}).done(function (html) {
let svg = $(html);
svg.attr("width", width);
svg.attr("height", height);
svg.attr("class", cls);
var newHtml = $('<a></a>').append(svg.clone()).html();
ctx.replaceWith(newHtml);
});
return this;
};
}(jQuery));
W html określ element svg w następujący sposób:
<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>
I zastosuj wtyczkę:
$(".mySVGClass").svgLoader();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-08 06:33:41
Możesz użyć do tego obrazu danych. za pomocą data-image (data-URI) można uzyskać dostęp do SVG jak inline.
Oto efekt rollover przy użyciu czystego CSS i SVG.
Wiem to brudny ale możesz to zrobić w ten sposób.
.action-btn {
background-size: 20px 20px;
background-position: center center;
background-repeat: no-repeat;
border-width: 1px;
border-style: solid;
border-radius: 30px;
height: 40px;
width: 60px;
display: inline-block;
}
.delete {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#FB404B' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
border-color:#FB404B;
}
.delete:hover {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Capa_1' fill='#fff' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='482.428px' height='482.429px' viewBox='0 0 482.428 482.429' style='enable-background:new 0 0 482.428 482.429;' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z'/%3e%3cpath d='M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z'/%3e%3cpath d='M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z'/%3e%3cpath d='M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
background-color: #FB404B;
}<a class="action-btn delete"> </a>Możesz przekonwertować swój svg na adres URL danych tutaj
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-07 12:09:35
Dla: animacji zdarzeń hover możemy pozostawić style wewnątrz pliku svg, jak
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
rect {
fill:rgb(165,225,75);
stroke:none;
transition: 550ms ease-in-out;
transform-origin:125px 125px;
}
rect:hover {
fill:rgb(75,165,225);
transform:rotate(360deg);
}
</style>
</defs>
<rect x='50' y='50' width='150' height='150'/>
</svg>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-20 12:57:32
Jeśli jest to zmiana statyczna, otwórz plik SVG w programie Adobe Illustrator (lub innym odpowiednim edytorze SVG) Zmień kolor i zapisz go.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-22 09:48:39