Question

我在尝试用以下方法修改样式属性时加载了一个svg文件：

$("object").contents().find('#path5431').css('fill', 'red');

我一无所获。代码在加载svg后运行。有什么提示吗？

感谢。

编辑：

<body>
     <object data='image.svg'></object>
</body>

Answer 1

如果SVG内嵌（嵌入）到html中，通过CSS / Javascript编辑它相对简单。

但是，从外部文件加载时，至少可以说操纵SVG结构。

您可能希望使用类似AJAX加载的东西将SVG嵌入到html中，然后操作......

此方法存在一些问题（请参阅How do I dynamically insert an SVG image into HTML?）。

但是，我已成功使用SVGInjector（请参阅https://github.com/iconic/SVGInjector）来执行以下操作：

<img id="image-one" class="inject-me" data-src="image-one.svg">
<img id="image-two" class="inject-me" data-src="image-two.svg">
// Elements to inject
var mySVGsToInject = document.querySelectorAll('img.inject-me');

// Options
var injectorOptions = {
  evalScripts: 'once',
  pngFallback: 'assets/png',
  each: function (svg) {
    // Callback after each SVG is injected
    console.log('SVG injected: ' + svg.getAttribute('id'));
  }
};

// Trigger the injection
SVGInjector(mySVGsToInject, injectorOptions, function (totalSVGsInjected) {
  // Callback after all SVGs are injected
  console.log('We injected ' + totalSVGsInjected + ' SVG(s)!');
});

我最近也遇到过这些文章......

试图用jquery修改svg样式

1 个答案: