html - 无法在 svg 中设置 foreignObject 的大小

Question

我有一个包含一些数据的 svg。我需要将此数据显示为表格，我设法做到了，将其作为 foreignObject 插入，但问题是它太小了，我无法为其设置大小。

这是 fiddle :https://jsfiddle.net/vaxobasilidze/tv2ko13y/

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="420mm" height="250mm" version="1.1" class="mapCitySvg" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
  \ viewBox="0 0 14226.71 7040.28" \ xmlns: xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css">
      <![CDATA[
      .str11 {stroke: #00CCFF;stroke-width:25.04;stroke-miterlimit:22.9256;stroke-opacity:0.678431}
      .str00 {stroke: #00CCFF;stroke-width:25.04;stroke-miterlimit:22.9256;stroke-opacity:0.749020}
      .fil22 {fill: #00212F}
      .fil44 {fill: white}
      .fil33 {fill: #005F87;fill-opacity:0.678431}
      .fil11 {fill: #00CCFF;fill-opacity:0.678431}
      .fil00 {fill: #00212F;fill-opacity:0.749020}
      .fil55 {fill: #00B3FF;fill-opacity:0.749020}
      .fnt11 {font-weight: bold;font-size:165.82px;font-family:\'Arial\'}\
        .fnt00 {font - weight: bold;font-size:298.02px;font-family:\'Arial\'}\
        ]]>
    </style>
  </defs>
  <g id="Layer_x0020_1">
    <metadata id="CorelCorpID_0Corel-Layer" />
    <path class="fil00 str00" d="M3219.61 12.53l10911.05 0c45.94,0 83.52,37.57 83.52,83.51l0 3733.62 -87.69 0.32 -83.52 83.52 0 2879.85 -3500.45 -1.09 70.3 60.11 -3497.11 4.17 -0.28 171.21 -0.28 -171.21 -3590.41 0 -83.52 83.52 -0.32 87.69 -3173.88 -0.28 -83.31 -83.52 0 -3039.46 -83.52 -83.52 -87.69 -0.32 0 -3307.25 83.52 -83.31 3039.46 0 83.52 -83.52 0.59 -334.06z" />
    <path class="fil11 str11" d="M96.05 12.53l3039.39 0 0 300.5 -32.8 33.56 -3031.53 0 -58.58 58.83 0 -309.37c0,-45.94 37.58,-83.52 83.52,-83.52z" />
    <text x="161.98" y="266.05" class="fil22 fnt00 svgCityName">' + cityName + '</text>
    <path class="fil33 str11 device0 devicelist" d="M335.19 646.98l2306.79 -16.44 0 199.35 -21.76 22.26 -2301.57 16.44 -38.86 39.02 0 -205.23c0,-30.47 24.94,-55.19 55.41,-55.41z"/>
    <text x="321.96" y="816.08" class="fil44 fnt11 device0text devicestext"><title>Please wait...</title>Please wait...</text>
    <path class="fil33 str11" d="M3419.06 345.1l4698.56 0 0 6221.56 -78.61 80.43 -4679.72 0 -140.39 140.99 0 -6242.83c0,-110.08 90.07,-200.15 200.16,-200.15z" />
    <polygon class="fil55 str00" points="10710.74,6852.37 14042.97,6852.37 14042.97,6940.06 13968.36,7027.75 10789.96,7027.75 10789.64,6940.06 " />
    <path class="fil33 str11 svgarrow" d="M2753.84 630.54l177.37 0 -4.02 -117.12 230.94 229.87 -230.94 218.25 4.02 -111.2 -177.37 0c-30.47,0 -55.41,-23.68 -55.41,-52.61l0.01 -54.44 -0.01 -57.34c0,-30.47 24.94,-55.41 55.41,-55.41z"/>
  </g>
  <foreignObject id="rowGroup" width="3100" height="2000" transform="translate(3500, 500)">
    <svg>
      <rect x="25" y="40" width="310" height="20" fill='gainsboro' />
      <rect x='25' y='76' width='310' height='20' fill='gainsboro'/>

      <text x="30" y="30" font-size="18px" font-weight='bold' fill='crimson' text-anchor='middle' role="row">
        <tspan x="100">Sales</tspan>
        <tspan x="200">Expenses</tspan>
        <tspan x="300">Net</tspan>
      </text>

      <text x="30" y="30" font-size="18px" text-anchor="middle" role="row">
        <tspan x="30" dy="1.5em" font-weight="bold" fill="crimson" text-anchor="start">Q1</tspan>
        <tspan x="100">$ 223</tspan>
        <tspan x="200">$ 195</tspan>
        <tspan x="300">$ 28</tspan>
      </text>

      <text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
      <tspan  x='30' dy='2.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q2</tspan>
      <tspan  x='100'>$ 183</tspan>
      <tspan  x='200'>$ 70</tspan>
      <tspan  x='300'>$ 113</tspan>
      </text>

      <text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
      <tspan  x='30' dy='3.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q3</tspan>
      <tspan  x='100'>$ 277</tspan>
      <tspan  x='200'>$ 88</tspan>
      <tspan  x='300'>$ 189</tspan>
      </text>

      <text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
      <tspan id="q4"  x='30' dy='4.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q4</tspan>
      <tspan  x='100'>$ 402</tspan>
      <tspan  x='200'>$ 133</tspan>
      <tspan  x='300'>$ 269</tspan>
      </text>
    </svg>
</foreignObject>
</svg>

您可以在箭头路径附近的大区域中看到小 table 。如何设置 #rowGroup 元素的大小？

Answer 1

我已经删除了根 svg 的宽度和高度，但您可以将其放回原处。如果你不给 svg 元素一个 width和 height该元素将采用父元素的宽度

我还删除了一些无用的斜线。

对于内部 svg，我使用了不同的 viewBox属性。

获取 viewBox 的大小我像这样使用 javascript:

console.log(rowGroup.getBBox())

这将返回一个对象，我正在使用该对象获取 viewBox 的值。您也不需要翻译 <svg>元素，尽管你可以。我没有翻译，而是给出了 <svg>一个x和一个 y

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" class="mapCitySvg" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
    viewBox="0 0 14226.71 7040.28" xmlns: xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css">
      <![CDATA[
      .str11 {stroke: #00CCFF;stroke-width:25.04;stroke-miterlimit:22.9256;stroke-opacity:0.678431}
      .str00 {stroke: #00CCFF;stroke-width:25.04;stroke-miterlimit:22.9256;stroke-opacity:0.749020}
      .fil22 {fill: #00212F}
      .fil44 {fill: white}
      .fil33 {fill: #005F87;fill-opacity:0.678431}
      .fil11 {fill: #00CCFF;fill-opacity:0.678431}
      .fil00 {fill: #00212F;fill-opacity:0.749020}
      .fil55 {fill: #00B3FF;fill-opacity:0.749020}
      .fnt11 {font-weight: bold;font-size:165.82px;font-family:'Arial'}\
      .fnt00 {font - weight: bold;font-size:298.02px;font-family:'Arial'}\
        ]]>
    </style>
  </defs>
  <g id="Layer_x0020_1">
    <metadata id="CorelCorpID_0Corel-Layer" />
    <path class="fil00 str00" d="M3219.61 12.53l10911.05 0c45.94,0 83.52,37.57 83.52,83.51l0 3733.62 -87.69 0.32 -83.52 83.52 0 2879.85 -3500.45 -1.09 70.3 60.11 -3497.11 4.17 -0.28 171.21 -0.28 -171.21 -3590.41 0 -83.52 83.52 -0.32 87.69 -3173.88 -0.28 -83.31 -83.52 0 -3039.46 -83.52 -83.52 -87.69 -0.32 0 -3307.25 83.52 -83.31 3039.46 0 83.52 -83.52 0.59 -334.06z" />
    <path class="fil11 str11" d="M96.05 12.53l3039.39 0 0 300.5 -32.8 33.56 -3031.53 0 -58.58 58.83 0 -309.37c0,-45.94 37.58,-83.52 83.52,-83.52z" />
    <text x="161.98" y="266.05" class="fil22 fnt00 svgCityName">' + cityName + '</text>
    <path class="fil33 str11 device0 devicelist" d="M335.19 646.98l2306.79 -16.44 0 199.35 -21.76 22.26 -2301.57 16.44 -38.86 39.02 0 -205.23c0,-30.47 24.94,-55.19 55.41,-55.41z"/>
    <text x="321.96" y="816.08" class="fil44 fnt11 device0text devicestext"><title>Please wait...</title>Please wait...</text>
    <path class="fil33 str11" d="M3419.06 345.1l4698.56 0 0 6221.56 -78.61 80.43 -4679.72 0 -140.39 140.99 0 -6242.83c0,-110.08 90.07,-200.15 200.16,-200.15z" />
    <polygon class="fil55 str00" points="10710.74,6852.37 14042.97,6852.37 14042.97,6940.06 13968.36,7027.75 10789.96,7027.75 10789.64,6940.06 " />
    <path class="fil33 str11 svgarrow" d="M2753.84 630.54l177.37 0 -4.02 -117.12 230.94 229.87 -230.94 218.25 4.02 -111.2 -177.37 0c-30.47,0 -55.41,-23.68 -55.41,-52.61l0.01 -54.44 -0.01 -57.34c0,-30.47 24.94,-55.41 55.41,-55.41z"/>
  </g>
  <svg id="rowGroup"  viewBox="25 13 310 103"  width="3100" height = "1030" x="3500" y="400">
    <rect x="25" y="40" width="310" height="20" fill='gainsboro' />
    <rect x='25' y='76' width='310' height='20' fill='gainsboro'/>
    
    <text x="30" y="30" font-size="18px" font-weight='bold' fill='crimson' text-anchor='middle' role="row">
      <tspan x="100">Sales</tspan>
      <tspan x="200">Expenses</tspan>
      <tspan x="300">Net</tspan>
    </text>
    
    <text x="30" y="30" font-size="18px" text-anchor="middle" role="row">
      <tspan x="30" dy="1.5em" font-weight="bold" fill="crimson" text-anchor="start">Q1</tspan>
      <tspan x="100">$ 223</tspan>
      <tspan x="200">$ 195</tspan>
      <tspan x="300">$ 28</tspan>
    </text>
    
    <text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
    <tspan  x='30' dy='2.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q2</tspan>
    <tspan  x='100'>$ 183</tspan>
    <tspan  x='200'>$ 70</tspan>
    <tspan  x='300'>$ 113</tspan>
    </text>

    <text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
    <tspan  x='30' dy='3.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q3</tspan>
    <tspan  x='100'>$ 277</tspan>
    <tspan  x='200'>$ 88</tspan>
    <tspan  x='300'>$ 189</tspan>
    </text>

    <text x='30' y='30' font-size='18px' text-anchor='middle' role="row">
    <tspan id="q4"  x='30' dy='4.5em' font-weight='bold' fill='crimson' text-anchor='start'>Q4</tspan>
    <tspan  x='100'>$ 402</tspan>
    <tspan  x='200'>$ 133</tspan>
    <tspan  x='300'>$ 269</tspan>
    </text>
  </svg>
</svg>