我有一个带有一些数据的svg。我需要将这些数据显示为一个表格,我设法做到了,将其插入为foreignObject
,但是问题是它太小了,我无法为其设置大小。
这是小提琴: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>
您可以在箭头路径附近的大区域中看到小桌子。如何设置#rowGroup
元素的大小?
答案 0 :(得分:2)
我删除了根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>