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: red
的style
属性(在网页中使用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
属性。