MathJax с Angular: SVG использует href, измененный с #ABC на https://localhost/#ABC - PullRequest
Новая
       11

MathJax с Angular: SVG использует href, измененный с #ABC на https://localhost/#ABC

0 голосов
/ 07 января 2019

Я использую MathJax v2.7 с Angular 6.2.10. Я пытаюсь сделать математику как SVG внутри компонента. Что я заметил, так это то, что после того, как математика изначально визуализировалась и стала видимой, она исчезла. Причиной этого является то, что пути href - это svg: use изменяются с href = "# ABC" на href = "https://localhost/#ABC", что, как я ожидаю, является угловым.

Как мне избавиться от этого поведения?

приложение-test.component.ts 

import { Component, OnInit, OnChanges, AfterContentInit } from '@angular/core';
import 'MathJax';

@Component({
    selector: 'app-test',
    templateUrl: './app-test.component.html',
    styleUrls: ['./app-test.component.css']
})
export class AppTestComponent implements OnInit, AfterContentInit {
    private math: string;


    constructor() { }

    ngOnInit() {
        this.genMath();
        MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'questionMath']);
    }

    ngAfterContentInit() {
        console.log(document.getElementById('math'));
        setTimeout(function() {MathJax.Hub.Typeset(document.getElementById('math'), function() { console.log('queued.'); }); }, 1);
    }

    genMath() {
        this.math = '$x^2+2x$';
    }
}

Приложение-test.component.html 

<div id="math">{{math}}</div>

В результате сгенерированный код SVG будет использовать элементы для ссылки на части других SVG, которые загружаются MathJax в фоновом режиме .:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="9.525ex" height="2.583ex" style="vertical-align: -0.411ex;" viewBox="0 -935 4100.9 1112" role="img" focusable="false" aria-hidden="true">
    <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
        <use xlink:href="#MJMATHI-78" x="0" y="0"></use>
    </g>
</svg>

Однако тег xlink: href изменен на: 

        <use xlink:href="https://localhost:4200/#MJMATHI-78" x="0" y="0"></use>

Что приводит к исчезновению SVG.

...