svg 中文字大小使用 px 时，显示的字号偏小

[zhiqingchen]

echarts

https://echarts.apache.org/examples/zh/editor.html?c=line-simple

svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="461" height="552" style="position: absolute; left: 0px; top: 0px; user-select: none;"><rect width="461" height="552" x="0" y="0" fill="none"></rect><g><path d="M46.1 482.5L414.9 482.5" fill="transparent" stroke="#E0E6F1"></path><path d="M46.1 411.5L414.9 411.5" fill="transparent" stroke="#E0E6F1"></path><path d="M46.1 341.5L414.9 341.5" fill="transparent" stroke="#E0E6F1"></path><path d="M46.1 271.5L414.9 271.5" fill="transparent" stroke="#E0E6F1"></path><path d="M46.1 200.5L414.9 200.5" fill="transparent" stroke="#E0E6F1"></path><path d="M46.1 130.5L414.9 130.5" fill="transparent" stroke="#E0E6F1"></path><path d="M46.1 60.5L414.9 60.5" fill="transparent" stroke="#E0E6F1"></path><path d="M46.1 482.5L414.9 482.5" fill="transparent" stroke="#6E7079" stroke-linecap="round"></path><path d="M46.5 482L46.5 487" fill="transparent" stroke="#6E7079"></path><path d="M99.5 482L99.5 487" fill="transparent" stroke="#6E7079"></path><path d="M151.5 482L151.5 487" fill="transparent" stroke="#6E7079"></path><path d="M204.5 482L204.5 487" fill="transparent" stroke="#6E7079"></path><path d="M257.5 482L257.5 487" fill="transparent" stroke="#6E7079"></path><path d="M309.5 482L309.5 487" fill="transparent" stroke="#6E7079"></path><path d="M362.5 482L362.5 487" fill="transparent" stroke="#6E7079"></path><path d="M415.5 482L415.5 487" fill="transparent" stroke="#6E7079"></path><text dominant-baseline="central" text-anchor="end" transform="translate(38.1 482)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">0</text><text dominant-baseline="central" text-anchor="end" transform="translate(38.1 411.6667)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">50</text><text dominant-baseline="central" text-anchor="end" transform="translate(38.1 341.3333)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">100</text><text dominant-baseline="central" text-anchor="end" transform="translate(38.1 271)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">150</text><text dominant-baseline="central" text-anchor="end" transform="translate(38.1 200.6667)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">200</text><text dominant-baseline="central" text-anchor="end" transform="translate(38.1 130.3333)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">250</text><text dominant-baseline="central" text-anchor="end" transform="translate(38.1 60)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">300</text><text dominant-baseline="central" text-anchor="middle" y="6" transform="translate(72.4429 490)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">Mon</text><text dominant-baseline="central" text-anchor="middle" y="6" transform="translate(125.1286 490)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">Tue</text><text dominant-baseline="central" text-anchor="middle" y="6" transform="translate(177.8143 490)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">Wed</text><text dominant-baseline="central" text-anchor="middle" y="6" transform="translate(230.5 490)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">Thu</text><text dominant-baseline="central" text-anchor="middle" y="6" transform="translate(283.1857 490)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">Fri</text><text dominant-baseline="central" text-anchor="middle" y="6" transform="translate(335.8714 490)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">Sat</text><text dominant-baseline="central" text-anchor="middle" y="6" transform="translate(388.5571 490)" fill="#6E7079" style="font-size: 12px; font-family: sans-serif;">Sun</text><g clip-path="url(#zr0-c0)"><path d="M72.4429 271L125.1286 158.4667L177.8143 166.9067L230.5 175.3467L283.1857 292.1L335.8714 275.22L388.5571 116.2667" fill="transparent" stroke="#5470c6" stroke-width="2" stroke-linejoin="bevel"></path></g><path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(2,0,0,2,72.4429,271)" fill="#fff" stroke="#5470c6"></path><path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(2,0,0,2,125.1286,158.4667)" fill="#fff" stroke="#5470c6"></path><path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(2,0,0,2,177.8143,166.9067)" fill="#fff" stroke="#5470c6"></path><path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(2,0,0,2,230.5,175.3467)" fill="#fff" stroke="#5470c6"></path><path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(2,0,0,2,283.1857,292.1)" fill="#fff" stroke="#5470c6"></path><path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(2,0,0,2,335.8714,275.22)" fill="#fff" stroke="#5470c6"></path><path d="M1 0A1 1 0 1 1 1 -0.0001" transform="matrix(2,0,0,2,388.5571,116.2667)" fill="#fff" stroke="#5470c6"></path></g><defs><clipPath id="zr0-c0"><path d="M45 59l372 0l0 424l-372 0Z" fill="#000"></path></clipPath></defs></svg>

code

import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import SvgChart, { SVGRenderer } from '@wuba/react-native-echarts/svgChart';

echarts.use([SVGRenderer, LineChart, GridComponent]);

export default function App() {
  const skiaRef = useRef<any>(null);
  useEffect(() => {
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
        },
      ],
    };
    let chart: any;
    if (skiaRef.current) {
      chart = echarts.init(skiaRef.current, 'light', {
        renderer: 'svg',
        width: 400,
        height: 400,
      });
      chart.setOption(option);
    }
    return () => chart?.dispose();
  }, []);

  return <SvgChart ref={skiaRef} />;
}

iOS

鸿蒙