外部SVG DEF文件不加载Firefox -Angular 2

Question

感谢有人可以帮助我解决这个问题。我在资产文件夹中有一个外部图标。我已经创建了一个组件来称呼它们，如下所示

路径：资产/图标/iCon-defs.svg

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve">
    <defs>
      <symbol id="icon-rpm-flag" viewBox="0 0 500 500">
        <path d="M 249.865 0.005 C 114.154 -0.861 0.839 111.267 0.005 247.236 C -0.845 386.335 109.937 499.162 248.165 499.995 C 386.531 500.826 499.096 389.433 499.995 250.808 C 500.882 112.829 389.248 0.906 249.865 0.005 Z M 285.935 273.8 C 257.466 273.8 228.98 273.819 200.511 273.768 C 197.349 273.768 194.1 273.614 191.022 272.985 C 178.37 270.4 170.275 257.627 173.132 245.058 C 175.836 233.189 184.915 226.268 198.404 226.217 C 225.171 226.114 251.956 226.182 278.725 226.182 C 310.171 226.182 341.632 226.233 373.077 226.165 C 384.03 226.146 392.65 230.094 397.381 240.331 C 404.863 256.556 392.942 273.63 373.909 273.751 C 344.592 273.938 315.254 273.8 285.935 273.8 Z M 285.714 363.702 C 285.714 363.716 285.714 363.716 285.714 363.732 C 256.173 363.732 226.633 363.837 197.093 363.702 C 182.808 363.632 172.331 353.344 172.433 339.977 C 172.536 326.677 183.216 316.405 197.365 316.386 C 256.446 316.319 315.527 316.319 374.605 316.454 C 378.317 316.472 382.276 317.287 385.676 318.75 C 395.867 323.089 401.242 334.092 399.045 344.99 C 396.887 355.672 387.67 363.565 376.256 363.632 C 346.071 363.818 315.883 363.702 285.714 363.702 Z M 285.97 136.301 C 285.97 136.282 285.97 136.282 285.97 136.266 C 315.934 136.266 345.898 136.112 375.867 136.333 C 389.456 136.436 399.315 146.589 399.388 159.703 C 399.455 173.086 389.351 183.528 375.608 183.563 C 315.883 183.682 256.173 183.733 196.448 183.393 C 191.515 183.358 185.97 181.164 181.788 178.358 C 173.318 172.678 170.512 161.896 173.745 152.253 C 176.821 143.036 185.326 136.436 195.444 136.368 C 225.613 136.182 255.782 136.301 285.97 136.301 Z M 100.633 249.702 C 100.736 236.268 111.704 225.585 125.19 225.774 C 138.182 225.96 149.05 236.98 149.015 249.958 C 148.983 263.29 137.944 274.261 124.596 274.21 C 111.194 274.175 100.514 263.258 100.633 249.702 Z M 100.633 160.024 C 100.582 146.554 111.329 135.688 124.747 135.602 C 137.621 135.518 148.746 146.419 149.015 159.411 C 149.304 172.73 138.454 183.836 125.036 183.97 C 111.399 184.105 100.684 173.596 100.633 160.024 Z M 124.577 316.03 C 137.996 315.927 149.102 326.863 149.034 340.128 C 148.948 353.174 138.284 364.04 125.206 364.361 C 111.909 364.703 100.752 353.838 100.633 340.433 C 100.496 326.777 110.957 316.132 124.577 316.03 Z"></path>
      </symbol>

      <symbol id="icon-rpm-info" viewBox="0 0 500 500">
        <path d="M 499.999 234.393 C 499.999 244.786 499.999 255.215 499.999 265.643 C 499.713 266.893 499.285 268.143 499.178 269.393 C 494.785 324.179 474.714 372.536 438.678 413.893 C 399.928 458.358 351.25 485.858 293.072 496.215 C 284.001 497.822 274.786 498.75 265.644 500 C 255.215 500 244.822 500 234.394 500 C 227.18 499.072 219.93 498.25 212.715 497.143 C 149.109 487.179 96.323 457.5 56.074 407.393 C 6.074 345.215 -10.069 274.143 5.967 196.036 C 25.895 98.965 108.752 19.822 206.465 3.858 C 215.751 2.358 225.108 1.286 234.394 0 C 244.822 0 255.215 0 265.644 0 C 266.894 0.286 268.144 0.608 269.394 0.822 C 285.072 3.5 301.251 4.5 316.322 9.143 C 415.071 39.536 475.214 105.608 496.142 206.929 C 498.035 215.965 498.749 225.215 499.999 234.393 Z M 224.322 267.715 C 224.001 290.286 230.68 296.25 249.537 292.965 C 250.644 292.786 251.751 292.465 252.822 292.108 C 258.787 290.036 261.465 286.429 261.715 280.143 C 261.822 277.036 261.786 273.965 261.858 270.858 C 262.179 260.429 266.072 251.572 273.786 244.536 C 276.572 242 279.465 239.643 282.358 237.286 C 293.286 228.393 303.001 218.429 309.75 205.893 C 324.643 178.215 316.5 148.536 288.679 134.358 C 262.286 120.893 234.822 120.5 207.894 133.393 C 196.073 139.036 187.18 148.036 183.323 161.036 C 181.073 168.608 181.466 175.929 187.608 181.786 C 196.787 190.536 208.001 188.965 215.68 177.965 C 226.537 162.429 245.715 157.286 263.001 165.322 C 271.536 169.25 275.786 176.179 275.429 185.536 C 275.108 193.5 271.322 199.929 265.786 205.179 C 260.608 210.072 255.037 214.643 249.358 218.965 C 232.394 232 224.144 249.108 224.322 267.715 Z M 267.858 341.786 C 267.894 327.929 256.715 316.536 242.965 316.393 C 229.144 316.25 217.858 327.429 217.715 341.322 C 217.608 355.465 228.965 367.143 242.751 367.036 C 256.429 366.965 267.786 355.5 267.858 341.786 Z"></path>
      </symbol>
    </defs>
</svg>

svg-icon.component.ponent.ts

@Component({
selector: 'svg-icon',
template: `
<svg class="icon" attr.width="{{width}}" attr.height="{{height}}" [ngStyle]="{'fill' : color ? color : 'currentColor'}">
    <use attr.xlink:href="assets/icons/symbol-defs.svg#{{icon}}"></use>
</svg>
`,
styleUrls: ['./svg-icon.component.scss']
})
export class SvgIconComponent {
@Input() icon: string;
@Input() width: string;
@Input() height: string;
@Input() color: string;
}

，我称其

<svg-icon icon="icon-rpm-info" width="20" height="20"></svg-icon>

为当我在Chrome运行该项目时，工作正常，但在Firefox中不起作用 （如果我与https一起运行，也不在chrome中起作用）

Answer 1

这可能是因为宽度和高度无法正确设置在模板中，请尝试提供如下给出的SVG的宽度和高度 -

<svg class="icon" [attr.width]="width" [attr.height]="height" [ngStyle]="{'fill' : color ? color : 'currentColor'}">
    <use attr.xlink:href="assets/icons/symbol-defs.svg#{{icon}}"></use>
</svg>

因此，现在组件（ svg-icon.component.component.ts.ts ）代码就是这样 -

@Component({
selector: 'svg-icon',
template: `
<svg class="icon" [attr.width]="width" [attr.height]="height" [ngStyle]="{'fill' : color ? color : 'currentColor'}">
    <use attr.xlink:href="assets/icons/symbol-defs.svg#{{icon}}"></use>
</svg>
`,
styleUrls: ['./svg-icon.component.scss']
})
export class SvgIconComponent {
@Input() icon: string;
@Input() width: string;
@Input() height: string;
@Input() color: string;
}

我希望它能起作用。

请在评论中让我知道，以防您仍然遇到任何问题。
谢谢。