Question

当我在SVG转换下面的表达时

<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>

笔画和填充颜色值是输出中的当前颜色

 <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>

填充=＆＃34; currentColor＆＃34;行程=＆＃34; currentColor＆＃34;

理想情况下，红色应为＃FF0000。我如何解决这个问题，或者是MathJax的预期行为。

Answer 1

这是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属性。

生成的SVG中的Mathjax Stoke和Fill颜色值是currentColor

1 个答案: