我正在嘗試使用 CSS 設定 SVG 元素的樣式。我在 index.js 檔案中使用 iframe 來參考我的 SVG，并且 SVG 顯示正常。但是，我的 CSS 樣式不適用，因為我只是將 SVG 內容復制/粘貼到我的 index.js 中。內容存盤在物件#document 下。你如何使用 CSS 參考 iframe 內容？
uj5u.com熱心網友回復：
您使用的是<iframe>還是<object>？你的標題說的是前者，但你的問題暗示了后者。
假設你真的是一個<iframe>. 那么答案是：你不能。CSS 不適用于檔案邊界。因此，您無法從包含 iframe 的頁面設定 iframe 內容的樣式。iframe 的內容是一個單獨的檔案（SVG 檔案）。
如果要對 SVG 進行樣式設定，則需要將 CSS 放入 SVG（使用<style>元素），或者使用包含樣式表的 XML 方式參考 CSS 檔案：
<?xml-stylesheet href="common.css"?>
見：https ://www.w3.org/TR/xml-stylesheet/
uj5u.com熱心網友回復：
假設您的 svg 在同一個域上，您可以在通過 js 加載后附加樣式表：
let svgIframe = document.querySelector('.svgIframe');
if(svgIframe){
svgIframe.addEventListener("load",function(e){
let svgDoc = svgIframe.contentDocument;
let iframeSvg = svgDoc.querySelector('svg');
let css = document.createElementNS("http://www.w3.org/2000/svg", "style");
css.textContent = 'path{fill:red;}';
iframeSvg.appendChild(css);
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/416683.html
標籤：