如何使用CSS(jQuery SVG图像替换)更改SVG图像的颜色?
这是我想出的一段简便代码的自我问答 目前,没有一种简单的方法可以嵌入SVG图像,然后通过CSS访问SVG元素。使用JS SVG框架的方法多种多样,但是如果您所做的只是制作一个具有滚动状态的简单图标,那么这些方法就过于复杂了 这就是我想到的,我认为这是目前为止在网站上使用SVG文件最简单的方法。它的概念从早期的文本到图像替换方法,但据我所知,还没有为SVG做过 问题是:如何使用CSS(jQuery SVG图像替换)更改SVG图像的颜色?,jquery,css,svg,Jquery,Css,Svg,这是我想出的一段简便代码的自我问答 目前,没有一种简单的方法可以嵌入SVG图像,然后通过CSS访问SVG元素。使用JS SVG框架的方法多种多样,但是如果您所做的只是制作一个具有滚动状态的简单图标,那么这些方法就过于复杂了 这就是我想到的,我认为这是目前为止在网站上使用SVG文件最简单的方法。它的概念从早期的文本到图像替换方法,但据我所知,还没有为SVG做过 问题是: 如何在不使用JS-SVG框架的情况下在CSS中嵌入SVG并更改其颜色?首先,在HTML中使用IMG标记嵌入SVG图形。我用Ado
如何在不使用JS-SVG框架的情况下在CSS中嵌入SVG并更改其颜色?首先,在HTML中使用IMG标记嵌入SVG图形。我用Adobe Illustrator制作了这个图形
<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>
上面的代码所做的是查找具有类“svg”的所有IMG,并将其替换为链接文件中的内联svg。它的巨大优势在于,现在可以使用CSS更改SVG的颜色,如下所示:
svg:hover path {
fill: red;
}
我编写的jQuery代码还跨原始图像ID和类提供端口。所以这个CSS也可以工作:
#facebook-logo:hover path {
fill: red;
}
或:
您可以在这里看到一个工作示例:
我们有一个更复杂的版本,其中包括缓存:
如果可以在页面中包含文件(PHP包含或通过您选择的CMS包含),则可以添加SVG代码并将其包含到页面中。这与将SVG源粘贴到页面中的工作原理相同,但会使页面标记更清晰
好处是,您可以通过CSS将SVG的某些部分作为悬停的目标——不需要javascript
您只需使用如下CSS规则:
#pathidorclass:hover { fill: #303 !important; }
<img src="/img/source.svg" class="myClass">
请注意,
!重要信息
位是覆盖填充颜色所必需的。或者,您可以使用CSS掩码
,虽然不好,但可以使用回退
.frame {
background: blue;
-webkit-mask: url(image.svg) center / contain no-repeat;
}
@德鲁·贝克提出了一个很好的解决问题的办法。代码工作正常。然而,那些使用AngularJs的人可能会发现jQuery有很多依赖性。因此,我认为为AngularJS用户粘贴一个遵循@Drew Baker解决方案的代码是一个好主意 相同代码的AngularJs方式 一,。Html:在Html文件中使用下面的标记:
<svg-image src="/icons/my.svg" class="any-class-you-wish"></svg-image>
四,。使用karma jasmine进行单元测试:
“严格使用”;
description('指令:svgImage',函数(){
var$rootScope,$compile,element,scope,$httpBackend,apirl,data;
beforeach(函数(){
模块(“myApp”);
注入(函数($injector){
$rootScope=$injector.get(“$rootScope”);
$compile=$injector.get(“$compile”);
$httpBackend=$injector.get(“$httpBackend”);
apiUrl=$injector.get('apiUrl');
});
scope=$rootScope.$new();
元素=角度。元素(“”);
元素=$compile(元素)(范围);
spyOn(作用域,'manufactualimgnode')。和callthrough();
$httpBackend.whenGET(apiUrl+'me').respond(200,{});
数据=“”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'';
$httpBackend.expectGET('/icons/icon-man.svg').respond(200,数据);
});
之后(函数(){
$httpBackend.VerifyNoOutstandingExpection();
$httpBackend.verifyNoOutstandingRequest();
});
它('should call manipleignode至少调用一次',函数(){
$httpBackend.flush();
expect(scope.manipleignode.callCount).toBe(1);
});
它('应该返回正确的结果',函数(){
$httpBackend.flush();
var result=scope.manipleimgnode(数据、元素);
期望(结果);
});
它('应该定义类',函数(){
$httpBackend.flush();
var result=scope.manipleimgnode(数据、元素);
var classList=[“svg”];
expect(result.classList[0]).toBe(classList[0]);
});
});
如果我们有更多这样的svg图像,我们也可以借助字体文件。像这样的网站可以从SVG获得字体文件
例如
我用AngularJS写了一个指令来解决这个问题。它是可用的 在呈现SVG元素后,它将替换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>
风格
剧本
$(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');
});
});
现在可以使用in(包括边缘,但不包括IE11)。它适用于SVG图像以及其他元素。您可以使用色调旋转
或反转
来修改颜色,尽管它们不允许您单独修改不同的颜色。我使用以下CSS类来显示图标的“禁用”版本(其中原始图标是带有饱和颜色的SVG图片):
这使得它在大多数浏览器中呈浅灰色。在IE(可能还有Opera Mini,我还没有测试过)中,它明显地被不透明属性褪色了,尽管它不是灰色的,但看起来仍然很不错
下面是一个示例,其中钟形图标有四个不同的CSS类:original(黄色)、上面的“disabled”类、色调旋转
(绿色)和反转
(蓝色)
.twa bell{
背景图像:url(“https://twemoji.maxcdn.com/svg/1f514.svg");
显示:内联块;
背景重复:无重复;
背景位置:中心;
高度:3em;
宽度:3em;
保证金:0.15em 0.3em;
垂直对齐:-0.3em;
背景尺寸:3em3em;
}
.灰发{
不透明度:0.4;
滤镜:灰度(100%);
-webkit过滤器:灰度(100%);
}
.色调旋转{
过滤器:色调旋转(90度);
-webkit过滤器:色调旋转(90度);
}
.倒置{
过滤器:倒置(100%);
-webkit过滤器:倒置(100%);
}
以下是基于公认答案的
knockout.js版本:
重要提示:实际上,repl也需要jQuery
.any-class-you-wish{
border: 1px solid red;
height: 300px;
width: 120px
}
'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]);
});
});
@font-face {
font-family: 'iconFont';
src: url('iconFont.eot');
}
#target{
color: white;
font-size:96px;
font-family:iconFont;
}
<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
}
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');
});
});
.disabled {
opacity: 0.4;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
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');
}
};
/**
* 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));
<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>
$(".mySVGClass").svgLoader();
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)
})
<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"/>
<?php
$content = file_get_contents($pathToSVG);
?>
<div class="fill-class"><?php echo $content;?></div>
.fill-class > svg {
fill: orange;
}
<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>
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
<img src="/img/source.svg" class="myClass">
filter: invert(86%) sepia(21%) saturate(761%) hue-rotate(92deg) brightness(99%) contrast(107%);
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(3,122,247)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}