Question

我正在尝试在彩色图标周围形成一个实线边框。

应该足够简单，并且显然它适用于字形文字，但我无法使其适用于<ion-icon>

我尝试过...

<ion-icon [name]="'heart'" style="font-size: 25px; color: #d00; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;"></ion-icon>

// like this fiddle: http://jsfiddle.net/9suc171t/1/

或者...

<ion-icon [name]="'heart'" style="font-size: 25px; color: #d00; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);"></ion-icon>

我已经为text-shadow尝试了其他格式，但是除了红色图标，我什么都没得到。

感觉有点卡住，不胜感激！

Answer 1

看来ion-icon正在使用阴影DOM以便不干扰其他样式。您也许可以通过JS访问影子DOM并直接对其进行编辑：

document.querySelector('ion-icon').shadowRoot.childNodes[0].innerText+="path{stroke:black; stroke-width:10})"

这将选择图标，获取其shadowRoot的第一个子元素，即<style>标记，然后添加更多样式。

Answer 2

我可能已经来不及了，但是我把这个放在后面，以防其他人正在寻找它。您可以使用与此答案中类似的方法来更新影子根的样式表。

我使用的是

<ion-icon name="add-circle" #addButton></ion-icon>

@ViewChild('addButton', {static: true, read: ElementRef}) addButtonView: ElementRef;

constructor(...) {...}
...
ngAfterViewInit() {
    const cssRule = 'stroke: var(--ion-color-light) !important;' +
        'stroke-width: 1rem;' +
        'stroke-opacity: 1;';
    try {
      const sheet = new CSSStyleSheet();
      // To support Internet Explorer before version 9
      sheet.insertRule ? sheet.insertRule(`svg {${cssRule}}`) : sheet.addRule( `svg`, cssRule);
      this.addButtonView.nativeElement.shadowRoot.adoptedStyleSheets =
          this.addButtonView.nativeElement.shadowRoot.adoptedStyleSheets.concat([sheet]);
    } catch (e) {  // Cannot instanciate CSSStyleSheet in some browsers
      const style = document.createElement('style');
      style.innerHTML = `svg {${cssRule}}`;
      this.addButtonView.nativeElement.shadowRoot.appendChild(style);
    }
}

Answer 3

CSS filter 属性在现代浏览器中非常适用于此，无需 JS。请参阅：https://stackoverflow.com/a/13624469/5063469

离子图标周围的阴影/轮廓

3 个答案: