个人中心
gpt4 book ai didi

javascript - 如何使用百分比调整 svg 的大小

转载 作者：可可西里 更新时间：2023-11-01 15:01:20 26 4
gpt4 key购买 nike

我的表格很少，里面有一些数据。每个表都使用百分比大小，并且可以调整大小。我需要在每个表中包含一些 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 更小，但不能调整大小。我需要它在用户调整表格大小时更改大小。

这是 fiddle :https://jsfiddle.net/vaxobasilidze/1oe8w8wm/12/

Svg 不得更改表格大小。相反，表格应该看起来像 fiddle 中的第二张表格。如何正确设置百分比？

编辑:这是另一个设置百分比的 fiddle :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>

最佳答案

目前，您的 SVG 大小由 width 和 height 属性决定。 

width="23.8345mm" height="216.59mm"

“216.59mm”相当于“819px”。如果您希望 SVG 根据其父容器进行缩放，请移除 width 和 height 属性。或者使用 CSS 将它们都设置为“100%”。

完成后，SVG 的大小将受到表格单元格宽度的限制。您的表格单元格宽度将为 476 像素的 2/7(来自 colspans)。

<table  style="width: 476px;..." />

关于javascript - 如何使用百分比调整 svg 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48884402/

26 4 0
文章推荐： javascript - 如何将基本身份验证 header 添加到返回 html 的发布请求？
文章推荐： hadoop - Flume - 无法配置接收器 - 没有为接收器配置 channel
文章推荐： hadoop - 使用 ambari 删除服务时出错
文章推荐： jquery - 使用 Jquery 从文本框中删除文本
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com