【问题标题】：Relative svg size相对 svg 大小
【发布时间】：2021-09-23 21:27:37
【问题描述】：

我的问题>

代码

请全屏查看;)

var elmids = ['playground'];

      var x, y = 0;  
      function getXYpos(elm) {
        x = elm.offsetLeft; 
        y = elm.offsetTop;      

        elm = elm.offsetParent; 

        while(elm != null) {
          x = parseInt(x) + parseInt(elm.offsetLeft);
          y = parseInt(y) + parseInt(elm.offsetTop);
          elm = elm.offsetParent;
        }

        return {'xp':x, 'yp':y};
      }

      function getCoords(e) {
       
        var xy_pos = getXYpos(this);

        if(navigator.appVersion.indexOf("MSIE") != -1) {
          var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;

          x = event.clientX + standardBody.scrollLeft;
          y = event.clientY + standardBody.scrollTop;
        }
        else {
          x = e.pageX;
          y = e.pageY;
        }

        x = x - xy_pos['xp'];
        y = y - xy_pos['yp'];
        document.getElementById('log').innerHTML = 'X= '+ x+ ' ,Y= ' +y;
      }
      
      for(var i=0; i<elmids.length; i++) {
        if(document.getElementById(elmids[i])) {
          document.getElementById(elmids[i]).onmousemove = getCoords;
        }
      }

@font-face {
        font-family: ubuntu-mono;
        src: url(ubuntu-mono.ttf);
      }

      @font-face {
        font-family: ubuntu;
        src: url(ubuntu.ttf);
      }

      html{
        height: 90%;
      }

      body{
        background-color: #9c7055;
        height: 90%;
        justify-content: center;
        overflow: hidden;
      }

      .bg{
        position: relative;
        top: -30%;
        bottom: 10px;
        height: 610px;
        width: 410px;
        margin-left: auto;
        margin-right: auto;
      }

      p{
        font-family: ubuntu-mono;
        font-size: 30px;
      }

      #cptpcp::after{
        content: "'s turn";
      }

      #cptpc{
        position: relative;
        width: 100%;
        top: -20px;
      }

      h1{
        top: -9vh;
        position: relative;
        text-align: center;
        font-size: 17vh;
        font-family: ubuntu;
        width: 100%;
      }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="cptpc">
      <p id="cptpcp">
        <span id="log"></span>
        <span id="log_f"></span>
      </p>
      <h1>
        NaPa
      </h1>
    </div>

    <div class="bg" id="playground">
      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="450" height="610" viewBox="0 0 1000 1355.56" xml:space="preserve">
        <g transform="matrix(2.43 0 0 2.43 498.11 681.07)">
          <g>
            <g transform="matrix(0 -0.97 0.97 0 -0.09 257.4)">
              <path style="stroke: rgb(255,255,255); stroke-width: 9; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M -1.0658141e-14 -199.26991 L 1.0658141e-14 199.26991" stroke-linecap="round" />
            </g>
            <g transform="matrix(0 -0.94 0.94 0 -189.08 -0.11)">
              <path style="stroke: rgb(255,255,255); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M -277.29633 0 L 277.29633 0" stroke-linecap="round" />
            </g>
            <g transform="matrix(0 -0.94 0.94 0 2.17 0.03)">
              <path style="stroke: rgb(255,255,255); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M 275 -197.5 L -275 197.5" stroke-linecap="round" />
            </g>
            <g transform="matrix(0 -0.97 0.97 0 1.31 -258.98)">
              <path style="stroke: rgb(255,255,255); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M 0 -198.51007 L 0 198.51007" stroke-linecap="round" />
            </g>
            <g transform="matrix(0 -0.94 0.94 0 188.96 0)">
              <path style="stroke: rgb(255,255,255); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M 278.662 -2.842171e-14 L -278.662 2.842171e-14" stroke-linecap="round" />
            </g>
            <g transform="matrix(0 -0.94 0.94 0 -1.97 -2.84)">
              <path style="stroke: rgb(255,255,255); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M 0 -200.06248 L 0 200.06248" stroke-linecap="round" />
            </g>
            <g transform="matrix(0 -0.94 0.94 0 -1.03 0.16)">
              <path style="stroke: rgb(255,255,255); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M -277.29633 0 L 277.29633 0" stroke-linecap="round" />
            </g>
            <g transform="matrix(0 -0.94 0.94 0 1.77 -2.42)">
              <path style="stroke: rgb(255,255,255); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M -273 -200 L 273 200" stroke-linecap="round" />
            </g>
          </g>
        </g>
      </svg>
    </div>
  </body>
</html>

有两个相互关联的主要问题：-

如何使svg 和div with the id 'playground' 的大小相对于屏幕大小
在保持它们相对于屏幕尺寸的同时，我应该在svg 中获得鼠标的x,y 坐标，而0%,0% 坐标应该是svg 的开始。与我的代码不同，我想在 % 而不是 px 中获取它，我想我可以使用 JQuery 的 $(window).width() 和 $(window).height() 并使用它将值从像素映射到百分比。

希望我清楚，如果不是请评论这篇文章。

【问题讨论】：

标签： javascript html jquery css svg

【解决方案1】：

哦，我刚刚找到了答案通过在 svg 中使用 preserveAspectRatio="none" 并在 css 中调整它的大小并使用 JQuery 的 $(window).width() 和 $(window).height() 我能够使用这个函数映射值（我尝试创建一个函数就像 aurdinos map())

function map(x, in_min, in_max, out_min, out_max) {
  return Math.trunc((x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min);
}

【讨论】：