CSSを使ってSVG画像の色を変えるにはどうすればいいですか（jQuery SVG画像置換）。
これは私が思い付いた便利なコードの自己Q&Aです。
現在、SVG画像を埋め込んでからCSSを介してSVG要素にアクセスする簡単な方法はありません。 JS SVGフレームワークを使用するにはさまざまな方法がありますが、ロールオーバー状態の単純なアイコンを作成するだけでは非常に複雑になります。
だからここに私が思いついたものがあります、それは私がはるかにウェブサイトの上でSVGファイルを使う最も簡単な方法であると思います。それは初期のテキストから画像への置き換え方法からその概念を取りますが、私が知っている限りではSVGのために行われたことがありません。
これが問題です。
JS-SVGフレームワークを使用せずにSVGを埋め込んでCSSにその色を変更する方法を教えてください。
まず、HTMLにIMGタグを使用してSVGグラフィックを埋めます。私はグラフィックを作るのにAdobe Illustratorを使いました。
<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>
これは、通常の画像を埋め込む方法と同じです。 IMGがsvgのクラスを持つように設定する必要があることに注意してください。 'social-link'クラスは単なる例です。 IDは必須ではありませんが便利です。
次に、このjQueryコードを使用します（別のファイルまたはHEAD内にインラインで）。
/*
* 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');
});
上記のコードが行うことは、クラス 'svg'を持つすべてのIMGを探し、それをリンクファイルのインラインSVGに置き換えることです。大きな利点は、CSSを使ってSVGの色を変更できるようになったことです。
svg:hover path {
fill: red;
}
私が書いたjQueryコードもオリジナルの画像IDとクラスにまたがって移植します。だからこのCSSも動作します：
#facebook-logo:hover path {
fill: red;
}
または
.social-link:hover path {
fill: red;
}
ここで動作している例を見ることができます： http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
ここにキャッシュを含むもっと複雑なバージョンがあります： https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
スタイル
svg path {
fill: #000;
}
スクリプト
$(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');
});
});
CSS filterプロパティ を 最近のほとんどのブラウザで使用できるようになりました （Edgeを含むがIE11は除く）。 SVG画像や他の要素に作用します。 hue-rotateまたはinvertを使用して色を変更することはできますが、それらを使用して異なる色を個別に変更することはできません。私は次のCSSクラスを使用してアイコンの「無効」バージョンを表示します（オリジナルは飽和色のSVG画像です）。
.disabled {
opacity: 0.4;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
これはほとんどのブラウザでそれを薄灰色にします。 IE（そしておそらく私がテストしていないOpera Mini）では、opacityプロパティが顕著に薄れています。
これは Twemoji bellアイコン用の4つの異なるCSSクラスの例です：オリジナル（黄色）、上記の "disabled"クラス、hue-rotate（緑色）、およびinvert（青色）。
.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>あるいは、CSSのmaskを使用することもできます - ブラウザのサポート /は良くありませんがフォールバックを使用することができます
.frame {
background: blue;
-webkit-mask: url(image.svg) center / contain no-repeat;
}
あなたがあなたのページにファイルを含めることができれば（あなたが選んだあなたのCMSを通してPHPを含むか含む）、あなたはSVGコードを追加してあなたのページに含めることができます。これはSVGソースをページに貼り付けるのと同じように機能しますが、ページのマークアップをよりきれいにします。
利点は、ホバーのためにCSSを介してSVGの一部をターゲットにできることです - JavaScriptは必要ありません。
http://codepen.io/chriscoyier/pen/evcBu
このようなCSSルールを使うだけでいいのです。
#pathidorclass:hover { fill: #303 !important; }
塗りつぶしの色を上書きするには!importantビットが必要です。
@Drew Bakerはこの問題を解決するための素晴らしい解決策を提供しました。コードは正しく機能します。しかし、AngularJを使用している人は、jQueryへの依存度が高いと感じるかもしれません。そのため、@ Drew Bakerのソリューションに従ったコードをAngularJSユーザーに貼り付けることをお勧めします。
AngularJsと同じコードのやり方
1. Html ：あなたのHTMLファイルの中で以下のタグを使用してください。
<svg-image src="/icons/my.svg" class="any-class-you-wish"></svg-image>
2.ディレクティブ ：これはタグを認識するために必要なディレクティブです。
'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.カルマ - ジャスミンによる単体テスト ：
'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]);
});
});
私はあなたがCSSでこれを達成したいのですが、それが小さくて単純なイメージであるならばちょっと思い出させる - あなたはいつでもそれをNotepad ++で開いて、path/whateverelementのfillを変えることができます：
<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"/>
それは醜いスクリプトのトンを節約することができます。それがオフベースであるならば申し訳ありませんが、時々簡単な解決策は見落とされることができます。
...複数のSVG画像を交換したとしても、この質問の一部のコードスニペットよりもサイズが小さい場合があります。
私はAngularJSでこの問題を解決するためのディレクティブを書きました。 ここ - ngReusableSvg です。
レンダリング後にSVG要素を置き換え、それをdiv要素内に配置することで、CSSを簡単に変更可能にします。これは、異なるサイズ/色を使用して異なる場所で同じSVGファイルを使用するのに役立ちます。
使い方は簡単です。
<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>
その後、あなたは簡単に持つことができます：
.svg-class svg {
fill: red; // whichever color you want
}
これは、受け入れられた答えに基づいたknockout.jsのバージョンです。
重要： 実際には置き換えにもjQueryが必要ですが、一部の人にとっては役に立つかもしれないと思いました。
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');
}
};
それからdata-bind="svgConvert: true"をあなたのimgタグに適用してください。
この解決法はimgタグをSVGに完全に置き換えて、それ以上のバインディングは尊重されません。
これはフレームワークコードではなく、純粋な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)
})
SVGInjectというオープンソースのライブラリがあります。これはonload属性を使ってインジェクションを起動します。 GitHubプロジェクトは にあります。https://github.com/iconfu/svg-inject
これはSVGInjectを使った最小の例です：
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
画像がロードされた後、onload="SVGInject(this)がインジェクションをトリガーし、<img>要素はsrc属性で提供されたSVGファイルの内容で置き換えられます。
SVGインジェクションに関するいくつかの問題を解決します。
SVGは注射が終了するまで隠すことができます。スタイルがロード時にすでに適用されている場合、これは重要です。そうしないと、スタイルが不適切なコンテンツのフラッシュが発生する可能性があります。
<img>要素は自動的にそれらを注入します。 SVGを動的に追加しても、インジェクション関数を再度呼び出すことを心配する必要はありません。SVGが複数回注入された場合に文書内で同じIDを複数回使用しないようにするために、SVG内の各IDにランダムなストリングが追加されます。
SVGInjectは普通のJavascriptであり、SVGをサポートするすべてのブラウザで動作します。
免責事項：私はSVGInjectの共著者です
このようなsvg画像がたくさんある場合は、フォントファイルの助けを借りることもできます。
https://glyphter.com/ のようなサイトでは、私たちのsvgsからフォントファイルを入手することができます。
例えば。
@font-face {
font-family: 'iconFont';
src: url('iconFont.eot');
}
#target{
color: white;
font-size:96px;
font-family:iconFont;
}
そのためにdata-imageを使うことができます。 data-image（data-URI）を使うと、インラインのようにSVGにアクセスできます。
純粋なCSSとSVGを使ったロールオーバー効果です。
私はそれを知っています めちゃくちゃな しかし、あなたはこのようにすることができます。
.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>あなたのSVGをここでデータURLに変換することができます
SVGは基本的にコードなので、内容だけが必要です。私はPHPを使ってコンテンツを取得しましたが、あなたは望むものなら何でも使うことができます。
<?php
$content = file_get_contents($pathToSVG);
?>
それから、私はdivコンテナーの中に「現状のまま」コンテンツを印刷しました。
<div class="fill-class"><?php echo $content;?></div>
CSSでコンテナのSVGの子にルールを設定する
.fill-class > svg {
fill: orange;
}
この結果はマテリアルアイコンSVGで得られました。
- Mozilla Firefox 59.0.2（64ビット）Linux
- Google Chrome66.0.3359.181（Build oficial）（64ビット）Linux
- オペラ53.0.2907.37 Linux
JQueryがあなたのDOMの中のすべてのsvg要素を処理し、あなたのDOMが合理的なサイズであることを望むなら選択された解決策は大丈夫です。しかし、DOMが大きく、DOMの一部を動的にロードすることにした場合、svg要素を更新するためだけにDOM全体を再スキャンする必要はありません。代わりに、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));
Htmlで、次のようにsvg要素を指定してください。
<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>
そしてプラグインを適用します。
$(".mySVGClass").svgLoader();
for：イベントのアニメーションをホバーすると、スタイルをsvgファイル内に残すことができます。
<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>