試圖修改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

回答

相關問題