HarmonyOS 鸿蒙Next 使用 Image 组件无法正确显示 MathJax 生成出的 SVG 图片,而浏览器可以正确显示
HarmonyOS 鸿蒙Next 使用 Image 组件无法正确显示 MathJax 生成出的 SVG 图片,而浏览器可以正确显示 原因在于 viewBox 的设置,与第一个g元素的位置关系对应错误。 将 transform=“scale(1,-1)” 改为 transform=“scale(1,-1) translate(0,-883.9)” 后,在 Previewer 中可以正确显示,在 svg 图片预览中却不可以。
应该是 Image 处理 SVG 的方式与其它应用处理方式不一致所导致的。
entry/src/main/ets/pages/Index.ets 内容如下
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Image('img/c.svg')
.margin({
top: 100
})
.height(100)
.width(100)
.border({
width: 1
})
.overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
}
.width('100%')
}
.height('100%')
}
}
entry/src/main/resources/rawfile/img/c.svg 图片内容如下
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" focusable="false" height="2.025ex" role="img" style="vertical-align: -0.025ex" viewBox="0 -883.9 902.6 894.9" width="2.042ex">
<defs>
<path d="M39 168Q39 225 58 272T107 350T174 402T244 433T307 442H310Q355 442 388 420T421 355Q421 265 310 237Q261 224 176 223Q139 223 138 221Q138 219 132 186T125 128Q125 81 146 54T209 26T302 45T394 111Q403 121 406 121Q410 121 419 112T429 98T420 82T390 55T344 24T281 -1T205 -11Q126 -11 83 42T39 168ZM373 353Q367 405 305 405Q272 405 244 391T199 357T170 316T154 280T149 261Q149 260 169 260Q282 260 327 284T373 353Z" id="MJX-1-TEX-I-1D452"/>
<path d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z" id="MJX-1-TEX-N-32"/>
</defs>
<g fill="currentColor" stroke="currentColor" stroke-width="0" transform="scale(1,-1) translate(0,-883.9)">
<g id="math">
<g id="msup">
<g id="mi">
<use id="1D452" xlink:href="#MJX-1-TEX-I-1D452"/>
</g>
<g id="mn" transform="translate(499,413) scale(0.707)">
<use id="32" xlink:href="#MJX-1-TEX-N-32"/>
</g>
</g>
</g>
</g>
</svg>
更多关于HarmonyOS 鸿蒙Next 使用 Image 组件无法正确显示 MathJax 生成出的 SVG 图片,而浏览器可以正确显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于HarmonyOS 鸿蒙Next 使用 Image 组件无法正确显示 MathJax 生成出的 SVG 图片,而浏览器可以正确显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,Image
组件无法正确显示MathJax生成的SVG图片,而浏览器可以正常显示,可能原因如下:
-
SVG解析差异:鸿蒙Next的
Image
组件与浏览器的SVG解析引擎不同,可能导致某些SVG特性不被支持或解析错误。 -
SVG特性支持不全:MathJax生成的SVG可能包含某些高级特性或标记,鸿蒙Next的SVG渲染引擎可能不完全支持这些特性。
-
资源加载问题:SVG文件可能依赖外部资源(如字体、样式表),
Image
组件在加载时可能未正确处理这些依赖。 -
编码或格式问题:SVG文件的编码或格式可能与
Image
组件的预期不匹配,导致渲染失败。
解决方法可能是将SVG转换为PNG或其他Image
组件支持的格式,或检查并简化SVG文件以确保兼容性。