试图修改SVG风格与jQuery

我加载了一个SVG文件，并试图修改此样式属性时：试图修改SVG风格与jQuery

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

我什么也没得到。该代码在加载svg后运行。有小费吗？

谢谢。

编辑：

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

来源

2015-04-03 Gabriel A. Zorrilla

我想我们需要看一些HTML，但如果它是一个内联svg'内容（）'是不需要的。否则（嵌入式）您将很难访问它。 – Shikkediel 2015-04-03 14:02:19

嗨Shik。添加了我如何嵌入svg文件。 – 2015-04-03 14:15:55

看看这个jQuery插件 - http://keith-wood.name/svg.html。据我了解，jQuery无法与天真地与svg良好地交互。 – 2015-04-03 14:20:56

如果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)!'); 
});

我也碰到了最近这些文章...

来源

2015-04-03 17:22:26 rfornal

我只是补充说，svg注入库现在包含在iconic.js中，因此您可以使用IconicJS（）。inject（mySVGsToInject，injectorOptions）来完成相同的结果。 – Marko 2016-04-05 20:29:07

试图修改SVG风格与jQuery

回答

相关问题