它在渲染后替换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
}
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));
/*
* 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');
});
$(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');
});
});
17 回答
我写了一个指令来解决AngularJS的这个问题 . 它可用here - ngReusableSvg .
它在渲染后替换SVG元素，并将其置于
div元素内，使其CSS易于更改 . 这有助于在不同的地方使用不同的尺寸/颜色使用相同的SVG文件 .用法很简单：
之后，您可以轻松拥有：
如果我们有更多这样的svg图像，我们也可以借助font-files .
像https://glyphter.com/这样的网站可以从我们的svgs获取一个字体文件 .
例如 .
您可以使用数据图像 . 使用数据图像（data-URI），您可以像内联一样访问SVG .
Here is rollover effect using pure CSS and SVG.
我知道 messy 但你可以这样做 .
您可以在此处将svg转换为数据网址
https://codepen.io/elliz/full/ygvgay
https://websemantics.uk/tools/svg-to-background-image-conversion/
如果这是静态更改，则在Adobe Illustrator（或任何合适的SVG编辑器）中打开SVG文件，更改颜色并保存 .
@Drew Baker为解决问题提供了很好的解决方案 . 代码工作正常 . 但是，那些使用AngularJs的人可能会发现很多依赖于jQuery . 因此，我认为粘贴AngularJS用户是一个好主意，这是一个遵循@Drew Baker解决方案的代码 .
AngularJs way of the same code
2.指令：这将是您需要识别标签的指令：
4.使用业力茉莉花进行单元测试：
我意识到你想用CSS完成这个，但只是提醒一下，如果它是一个小而简单的图像 - 你总是可以在记事本中打开它并改变路径/ whateverelement的填充：
它可以节省大量丑陋的剧本 . 对不起，如果它是偏离基础的，但有时可以忽略简单的解决方案 .
...甚至交换多个svg图像的大小可能比这个问题的一些代码片段小 .
有一个名为SVGInject的开源库，它使用
onload属性来触发注入 . 你可以在https://github.com/iconfu/svg-inject找到GitHub项目这是使用SVGInject的最小示例：
加载图像后，
onload="SVGInject(this)将触发注入，<img>元素将被src属性中提供的SVG文件的内容替换 .它解决了SVG注入的几个问题：
SVG可以隐藏，直到注射完成 . 如果在加载时已经应用了样式，则这很重要，否则会导致短暂的“无格式内容闪烁” .
<img>元素自动注入 . 如果动态添加SVG，则不必担心再次调用注入函数 .随机字符串被添加到SVG中的每个ID，以避免在多次注入SVG时在文档中多次使用相同的ID .
SVGInject是简单的Javascript，适用于所有支持SVG的浏览器 .
免责声明：我是SVGInject的合着者
或者你可以使用CSS
mask，授予browser support不是很好，但你可以使用后备由于SVG基本上是代码，因此您只需要内容 . 我用PHP来获取内容，但你可以使用你想要的任何东西 .
然后，我在div容器中“按原样”打印内容
最终在CSS上将规则设置为容器的SVG子项
我用物料图标SVG得到了这个结果：
这是基于接受的答案的
knockout.js的版本：Important: 它确实需要jQuery来替换，但我认为它可能对某些人有用 .
然后只需将
data-bind="svgConvert: true"应用于您的img标签即可 .此解决方案使用SVG完全替换
img标记，并且不会遵守任何其他绑定 .如果您希望jQuery处理DOM中的所有svg元素并且DOM的大小合理，则所选解决方案很好 . 但是如果你的DOM很大并且你决定动态加载你的部分DOM，那么必须重新扫描整个DOM是没有意义的DOM只是为了更新svg元素 . 相反，使用jQuery插件来执行此操作：
在你的html中，指定一个svg元素，如下所示：
并应用插件：
首先，在HTML中使用IMG标记嵌入SVG图形 . 我使用Adobe Illustrator制作图形 .
这就像你嵌入正常图像一样 . 请注意，您需要将IMG设置为具有svg类 . “社交链接”类只是为了举例 . 该ID不是必需的，但很有用 .
然后使用这个jQuery代码（在单独的文件中或在HEAD中内联） .
上面的代码所做的是查找具有类'svg'的所有IMG，并将其替换为链接文件中的内联SVG . 它的巨大优势在于它允许您现在使用CSS来更改SVG的颜色，如下所示：
我写的jQuery代码也跨越原始图像ID和类 . 所以这个CSS也适用：
要么：
You can see an example of it working here: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
We have a more complicated version that includes caching here: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
您现在可以在most modern browsers中使用CSS filter property（包括Edge，但不是IE11） . 它适用于SVG图像以及其他元素 . 您可以使用
hue-rotate或invert来修改颜色，但它们不允许您单独修改不同的颜色 . 我使用以下CSS类来显示图标的"disabled"版本（其中原始图片是饱和色的SVG图片）：这使得它在大多数浏览器中都是浅灰色 . 在IE（可能还有Opera Mini，我还没有测试过）中，不透明度属性明显褪色，虽然它不是灰色的，但仍然看起来相当不错 .
以下是Twemoji响铃图标的四个不同CSS类的示例：原始（黄色），上面的"disabled"类，
hue-rotate（绿色）和invert（蓝色） .这是一个没有框架的代码，只有纯粹的js：
样式
脚本
如果您可以在页面中包含文件（PHP包括或通过您选择的CMS包含），您可以添加SVG代码并将其包含在您的页面中 . 这与将SVG源粘贴到页面中的工作方式相同，但使页面标记更清晰 .
好处是你可以通过CSS定位SVG的部分悬停 - 不需要javascript .
http://codepen.io/chriscoyier/pen/evcBu
你只需要使用这样的CSS规则：
请注意，
!important位是覆盖填充颜色所必需的 .for：悬停事件动画我们可以将样式留在svg文件中，就像一个
check this on svgshare