我ion-icon在我的應用程式中使用了，我希望能夠動態更改 svg 中的某些屬性。具體來說，我正在使用以下電池圖示，我想更改其填充百分比：
<ion-icon name="battery-full-outline"></ion-icon>
我感興趣的width屬性<rect>是 SVG 中兩個元素中第二個元素的屬性。使用我的瀏覽器工具，我發現生成的 HTML 如下：
<ion-icon _ngcontent-amc-c135="" name="battery-full-outline" ng-reflect-name="battery-full-outline" role="img" aria-label="battery full outline">
#shadow-root (open)
<div >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
512 512">
<title>Battery Full</title>
<rect x="32" y="144" width="400" height="224" rx="45.7" ry="45.7" stroke-linecap="square" stroke-miterlimit="10" ></rect>
<rect x="85.69" y="198.93" width="292.63" height="114.14" rx="4" ry="4" stroke-linecap="square" stroke-miterlimit="10" ></rect>
<path stroke-linecap="round" stroke-miterlimit="10" d="M480 218.67v74.66" ></path>
</svg>
</div>
</ion-icon>
問題當然是這些元素被嵌入在一個 shadow DOM 中，并且 Ionic 圖示不會暴露任何用戶可以修改的部分。Angular 有沒有辦法解決這個問題？我想知道是否可以在用于訪問底層元素的ion-icon組件上放置一個指令ElementRef（但似乎有些事情我沒有考慮過使這項作業起作用）。
uj5u.com熱心網友回復：
最簡單的方法是編輯和創建您自己的圖示。請檢查
uj5u.com熱心網友回復：
這當然不是一個好的做法（并且違背了 Angular 的基本原理），但我能找到的最簡單的解決方案就是使用普通的 JavaScript 檔案方法來獲取width我正在尋找的屬性并在陰影中設定一個新值DOM 元素：
const rect = document.querySelector('.my-icon-class').shadowRoot.querySelectorAll('icon-inner svg rect)[1];
const fullWidth = rect.getAttribute('width');
const newWidth = parseFloat(fullWidth) * BATTERY_PERCENTAGE * 0.01;
rect.setAttribute('width', `${newWidth}`);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/324881.html
上一篇：我如何處理（不是修復！）IonicFramework中的CORS例外？
下一篇：Python-簡單的網頁抓取不拉