Question

在这里，我正在尝试更改图像svg的颜色。

  <button>
 <img src="someImage.svg">
 </button>

是否可以按角度5更改按钮中svg图像的颜色

Answer 1

如果SVG在DOM中是内联的，则可以将CSS应用于SVG。实现此目的的最简单方法是使用SVG注射器。它使用Javascript加载外部SVG文件，并用SVG标记替换HTML元素（通常为public class Test { public static void main(String[] args) { //Already created objects List<Foo> foos0 = Arrays.asList(new Foo("A")); //However I need to apply some modification on them, that is dependent on themselves //1. Returning same object List<Foo> foos1 = foos0.stream().map(Test::modifyValueByReturningSameObject).collect(Collectors.toList()); //2. Creating new object List<Foo> foos2 = foos0.stream().map(Test::modifyValueByCreatingNewObject).collect(Collectors.toList()); //3. Modifying param foos0.stream().forEach(Test::modifyValueByModifyingParam); } //Lets imagine that all methods below are somehow dependent on param Foo static Foo modifyValueByReturningSameObject(Foo foo) { foo.setValue("fieldValueDependentOnParamFoo"); return foo; } static Foo modifyValueByCreatingNewObject(Foo foo) { Foo newFoo = new Foo("fieldValueDependentOnParamFoo"); return newFoo; } static void modifyValueByModifyingParam(Foo foo) { foo.setValue("fieldValueDependentOnParamFoo"); return; } } public class Foo { public String value; public Foo(String value) { this.value = value; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } }元素）。

如果您使用SVGInject（https://github.com/iconfu/svg-inject/），则HTML将如下所示：

<img>

图像加载后，<button> <img src="someImage.svg" onload="SVGInject(this)"> </button>属性通过替换onload元素起到了神奇的作用。它看起来应该一样，但是您可以将CSS应用于SVG。

Answer 2

我从http://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/中获取了一些代码您必须使用object元素而不是img元素。您必须给您的object元素指定一个id（在示例中为“ svg-object”）。您必须给svg文件中的按钮指定一个ID（在示例中为external-1）。然后，您可以更改样式

var svgObject = document.getElementById('svg-object').contentDocument;
var svg = svgObject.getElementById('external-1');
svg.style.fill = "green"

内嵌svg稍微容易一些，但可以做到。

更改img src SVG颜色

2 个答案: