Question

我正在使用MathJax v2.7和Angular 6.2.10。我正在尝试将数学表示为组件内的SVG。我注意到的是，数学最初呈现并可见后，它就消失了。这样做的原因是href路径是svg：按我期望的角度，使用已从href =“＃ABC”更改为href =“ https：// localhost /＃ABC”。

我如何摆脱这种行为？

app-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$';
    }
}

app-test.component.html

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

结果是生成的SVG代码将具有使用元素来引用MathJax在后台加载的其他SVG的部分。

<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消失。

带有Angular的MathJax：SVG使用href从#ABC更改为https：// localhost /＃ABC

0 个答案: