Question

我需要以相同的字体大小显示SVG文本，如果文本的长度不同，则应该可以水平滚动。网上有很多这样的问题，但没有一个答案可行，至少我能找到。我已将各种答案中的各个部分放在一起，如jsfiddle所示。但它在所有浏览器中都存在问题。

在FF中，左对齐很好，但滚动根本不起作用。

在Chrome中，左对齐甚至没有关闭，滚动也不起作用。

在IE中，它几乎就是我想要的方式。左对齐有点偏，但滚动工作。

是否可以让文本从相同的X位置开始，滚动条适用于所有浏览器？

    <div style="display:block; margin:0 auto; height:100px; width:90%; border:2px solid #000; overflow-x:scroll;">
     <div style="display:inline-block">
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="80"   
           onload="init(evt)"
           align="center"> 
            <rect id="rect1" x="20" y="10" width="100%" height="100%" fill="white" stroke="red"/>
            <text id="text-to-resize"
              text-anchor="middle"
              x="170" y="50"
              font-family="Times New Roman" font-size="55">
              <tspan text-anchor="middle" dy="15">Some short text</tspan>
            </text>
      </svg>
     </div>
    </div>


    <div style="display:block; margin:0 auto; height:100px; width:90%; border:2px solid #000; overflow-x:scroll;">
     <div style="display:inline-block">
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="80"   
           onload="init(evt)"
           align="center"> 
            <rect id="rect1" x="20" y="10" width="100%" height="100%" fill="white" stroke="red"/>
            <text id="text-to-resize"
              text-anchor="middle"
              x="730" y="50"
              font-family="Times New Roman" font-size="55">
              <tspan text-anchor="middle" dy="15">Some Unknown Text that is too long to display without scrolling</tspan>
            </text>
      </svg>
     </div>
    </div>

    <script type="text/ecmascript">
      function init(evt) {
          if ( window.svgDocument == null ) {
              svgDocument = evt.target.ownerDocument;
          }

          maximum_length = 300;
          my_text = svgDocument.getElementById('text-to-resize');

          for (var font_size=55; font_size>0; font_size--) {
              if(my_text.getComputedTextLength() < maximum_length){break;}
              my_text.setAttributeNS(null, "font-size", font_size);
          }
      }
    </script>

SVG对齐和滚动不起作用

0 个答案: