我有几张表中包含一些数据。每个表都使用百分比来调整大小，并且可以调整大小。我需要在每个表中包含一些svg并调整它们的大小，以便svg不会更改表的大小。我尝试像这样设置大小（在这种情况下没有额外的行）：
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="23.8345mm" height="100%" version="1.1"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality;
fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 100% 100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect class="fil0 str0" x="5%" y="5%" width="100%" height="100%"/>
<rect class="fil0 str0" x="5%" y="5%" width="100%" height="100%"/>
</g>
</svg>
它使svg更小，但不可调整大小。当用户调整表格大小时，我需要它来改变大小。
这是小提琴：https://jsfiddle.net/vaxobasilidze/1oe8w8wm/12/
Svg不得更改表格大小。相反，表应该看起来像小提琴中的第二个表。如何正确设置百分比？
编辑：以下是设定百分比的另一个小提琴：https://jsfiddle.net/vaxobasilidze/qu20vxcx/3/我做错了什么？
.channels {
/*border-collapse: collapse;*/
border-spacing: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-weight: bold;
border: 1px solid rgba(30, 30, 30, 1);
border-radius: 4px;
overflow: hidden;
background: url(images/comment-bg3.png) repeat;
resize: both;
}
.channels td {
border-left: 1px solid rgba(30, 30, 30, 1);
}
.channels td:first-child {
border-left: none;
}
.channelHeader {
height: 7%;
text-align: center;
background: url(images/comment-bg2.png) repeat;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
}
.audioVideo {
height: 79%;
}
.channelInfo {
height: 7%;
max-height: 7%;
text-align: center;
background: url(images/comment-bg2.png) repeat;
border-bottom: 1px solid rgba(30, 30, 30, 1);
border-top: 1px solid rgba(30, 30, 30, 1);
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
}
.channelInfo td {
border-radius: 2px 2px 0 0;
}
.channelInfoValues {
height: 7%;
max-height: 7%;
text-align: center;
}
.str0 {stroke:white;stroke-width:3.97;stroke-miterlimit:22.9256}
.str1 {stroke:#999999;stroke-width:3.97;stroke-miterlimit:22.9256}
.fil1 {fill:none}
.fil0 {fill:#333333}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script>
<table class="channels ui-draggable ui-resizable" style="width: 476px; height: 266px; position: relative;" oncontextmenu="return false;">
<tbody>
<tr class="channelHeader ui-draggable-handle">
<td colspan="5" class="channelName" id="channel1" audiopid="[0x33]" audiostream1="format:mp2,type:audio,pid:[0x33],width:0,height:0" interface="192.168.222.15" method="info" multicast="239.10.20.101" port="6000" protocol="udp" resolution="1920x1080" serviceid="1" servicename="undefined" serviceprovider="provider" videopid="[0x31]" videostream="format:h264,type:video,pid:[0x31],width:1920,height:1080">undefined</td>
<td colspan="2" class="channelNumber">1</td>
</tr>
<tr class="audioVideo">
<td colspan="5" class="vid"></td>
<td colspan="2" class="sound">
<div class="audiodb">
<div class="audioBackground">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="23.8345mm" height="216.59mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 473.04 4298.61" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect class="fil0 str0" x="106.36" y="267.96" width="310.69" height="4028.67"/>
<rect class="fil0 str0" x="106.36" y="1.98" width="310.69" height="171.7"/>
<g id="_2182794397872">
<line class="fil1 str1" x1="-0" y1="383.47" x2="46.3" y2= "383.47" />
</g>
<g id="_2182794397552">
<line class="fil1 str1" x1="-0" y1="476.77" x2="46.3" y2= "476.77" />
</g>
<g id="_2182794396048">
<line class="fil1 str1" x1="0.23" y1="582.02" x2="46.53" y2= "582.02" />
</g>
<g id="_2182794399056">
<line class="fil1 str1" x1="0.22" y1="674.58" x2="46.53" y2= "674.58" />
</g>
<g id="_2182794398768">
<line class="fil1 str1" x1="-0" y1="779.08" x2="46.3" y2= "779.08" />
</g>
<g id="_2182794398096">
<line class="fil1 str1" x1="46.3" y1="872.39" x2="473.04" y2= "872.39" />
</g>
<g id="_2182794400656">
<line class="fil1 str1" x1="46.3" y1="267.96" x2="473.04" y2= "267.96" />
</g>
<g id="_2182794401072">
<line class="fil1 str1" x1="-0" y1="1011.62" x2="46.3" y2= "1011.62" />
</g>
<g id="_2182794400400">
<line class="fil1 str1" x1="-0" y1="1153.4" x2="46.3" y2= "1153.4" />
</g>
<g id="_2182794401904">
<line class="fil1 str1" x1="-0" y1="1291.89" x2="46.3" y2= "1291.89" />
</g>
<g id="_2182794402160">
<line class="fil1 str1" x1="0.44" y1="1420.55" x2="46.74" y2= "1420.55" />
</g>
<g id="_2182794402384">
<line class="fil1 str1" x1="-0" y1="1536.07" x2="46.3" y2= "1536.07" />
</g>
<g id="_2182794405264">
<line class="fil1 str1" x1="45.95" y1="1662.75" x2="455.89" y2= "1662.75" />
</g>
<g id="_2182794405616">
<line class="fil1 str1" x1="43.77" y1="2291.58" x2="453.71" y2= "2291.58" />
</g>
<g id="_2182794406032">
<line class="fil1 str1" x1="41.58" y1="2920.4" x2="451.53" y2= "2920.4" />
</g>
<g id="_2182794406384">
<line class="fil1 str1" x1="46.3" y1="3454.71" x2="456.25" y2= "3454.71" />
</g>
<g id="_2182794407888">
<line class="fil1 str1" x1="46.3" y1="3803.9" x2="456.25" y2= "3803.9" />
</g>
<g id="_2182794413456">
<line class="fil1 str1" x1="47.35" y1="4025.76" x2="457.3" y2= "4025.76" />
</g>
<g id="_2182794415312">
<line class="fil1 str1" x1="48.4" y1="4153.1" x2="458.35" y2= "4153.1" />
</g>
<g id="_2182794415632">
<line class="fil1 str1" x1="47.35" y1="4296.63" x2="457.3" y2= "4296.63" />
</g>
</g>
</svg>
</div>
</div>
</td>
</tr>
<tr class="channelInfo">
<td class="resolution">Resolution</td>
<td class="aspect">Aspect</td>
<td class="fps">FPS</td>
<td class="vformat">V-Format</td>
<td class="aformat">A-Format</td>
<td>Left</td><td>Right</td>
</tr>
<tr class="channelInfoValues">
<td class="resolValue">1920x1080</td>
<td class="aspectValue">---</td>
<td class="fpsValue">---</td>
<td class="vformatValue">H-264</td>
<td class="aformatValue">MP2</td>
<td class="leftBarValue">---</td>
<td class="rightBarValue">---</td>
</tr>
</tbody>
</table>
<table class="channels ui-draggable ui-resizable" style="width: 476px; height: 266px; position: relative;" oncontextmenu="return false;">
<tbody>
<tr class="channelHeader ui-draggable-handle">
<td colspan="5" class="channelName" id="channel1" audiopid="[0x33]" audiostream1="format:mp2,type:audio,pid:[0x33],width:0,height:0" interface="192.168.222.15" method="info" multicast="239.10.20.101" port="6000" protocol="udp" resolution="1920x1080" serviceid="1" servicename="undefined" serviceprovider="provider" videopid="[0x31]" videostream="format:h264,type:video,pid:[0x31],width:1920,height:1080">undefined</td>
<td colspan="2" class="channelNumber">1</td>
</tr>
<tr class="audioVideo">
<td colspan="5" class="vid"></td>
<td colspan="2" class="sound">
<div class="audiodb">
<div class="audioBackground">
</div>
</div>
</td>
</tr>
<tr class="channelInfo">
<td class="resolution">Resolution</td>
<td class="aspect">Aspect</td>
<td class="fps">FPS</td>
<td class="vformat">V-Format</td>
<td class="aformat">A-Format</td>
<td>Left</td><td>Right</td>
</tr>
<tr class="channelInfoValues">
<td class="resolValue">1920x1080</td>
<td class="aspectValue">---</td>
<td class="fpsValue">---</td>
<td class="vformatValue">H-264</td>
<td class="aformatValue">MP2</td>
<td class="leftBarValue">---</td>
<td class="rightBarValue">---</td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
目前，您的SVG大小由width和height属性决定。
width="23.8345mm" height="216.59mm"
“216.59mm”相当于“819px”。如果您希望SVG根据其父容器进行缩放，请删除width和height属性。或者用CSS将它们设置为“100％”。
一旦这样做，SVG的大小将受到表格单元格宽度的约束。您的表格单元格宽度为2/7（来自colspans），为476px。
<table style="width: 476px;..." />