Mathjax斯托克和填充颜色值是currentColor

问题描述:

当我转换下面表达在SVGMathjax斯托克和填充颜色值是currentColor

<math style="line-height:10em;color:red;" xmlns='http://www.w3.org/1998/Math/MathML'> 
    <mrow> 
    <mfrac><mn>1</mn><mn>2</mn></mfrac> 
    <msub><mi>m</mi><mn>1</mn></msub> 
    <msubsup> 
     <mi>u</mi> 
     <mn>1</mn> 
     <mn>2</mn> 
    </msubsup> 
    </mrow> 
    <mo>+</mo> 
    <mrow> 
    <mfrac><mn>1</mn><mn>2</mn></mfrac> 
    <msub><mi>m</mi><mn>2</mn></msub> 
    <msubsup> 
     <mi>u</mi> 
     <mn>2</mn> 
     <mn>2</mn> 
    </msubsup> 
    </mrow> 
</math> 

中风和填充颜色值在输出currentcolor

<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="-webkit-transition-property: none; color: red; vertical-align: -1.13ex; display: inline; line-height: 10em; " width="17.114ex" height="3.384ex" viewBox="0 -970.7 7368.4 1457.1" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" computedstyle="font_style:normal;font_weight:normal;font_variant:normal;width:136px;height:27px;text-align:left;font-size:16px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;text-indent:0px;vertical-align:-9px;line-height:160px;" amzn-node-id="34" > 
       <defs id="MathJax_SVG_glyphs" style="-webkit-transition-property: none; display: inline; " computedstyle="font_style:normal;font_weight:normal;font_variant:normal;width:0px;height:0px;text-align:left;font-size:16px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;text-indent:0px;vertical-align:baseline;line-height:160px;" amzn-node-id="35" > 
        <path stroke-width="1" id="MJMAIN-31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z" style="-webkit-transition-property: none; display: inline; " computedstyle="font_style:normal;font_weight:normal;font_variant:normal;width:0px;height:0px;text-align:left;font-size:16px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;text-indent:0px;vertical-align:baseline;line-height:160px;" amzn-node-id="36" ></path> 

       </defs> 
       <g fill="currentColor" stroke="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)" style="-webkit-transition-property: none; display: inline; " computedstyle="font_style:normal;font_weight:normal;font_variant:normal;width:0px;height:0px;text-align:left;font-size:16px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;text-indent:0px;vertical-align:baseline;line-height:160px;" amzn-node-id="51" > 
       code removed for brevity 
       </g> 
      </svg> 

填充=“currentColor “stroke =”currentColor“

理想情况下,它应该是#FF0000红色。 我该如何解决这个问题或者它是否是MathJax期望的行为。

这是MathJax的正确输出。请注意,<svg>元素的color: redstyle属性(在网页中使用SVG时)会导致currentColor变为红色。但是,如果将SVG作为单独的文件加载,浏览器可能无法处理style属性。

有几种方法可以解决这个问题。其中之一是使用mathcolor="red"属性,而不是style="color:red",因为MATHML对提供mathcolor明确:

<math mathcolor="red" xmlns='http://www.w3.org/1998/Math/MathML'> 
... 
</math> 

或者,你可以使用一个<mstyle>元素在内部设置数学颜色:

<math xmlns='http://www.w3.org/1998/Math/MathML'> 
    <mstyle mathcolor="red"> 
    ... 
    </mstyle> 
</math> 

无论是这些将会使SVG在内部设置颜色,而不是通过SVG的style属性。