Chrome SVG会在某些设备上截断文本

flvlnr44  于 2023-03-16  发布在  Go
关注(0)|答案(2)|浏览(129)

我的SVG文件(我把它作为<img>添加到html文件中)在一些网络浏览器和一些电脑上会被切断。我也试过在其他设备上运行它,但据我所知,它在MacxChrome、MacxSafari、MacxFirefox、WindowsxChrome上运行良好,但在WindowsxEdge和其他WindowsxChrome上运行不好。到目前为止,它在移动的上运行良好。
Cut text image
我尝试添加overflow-x: visible,并检查svg文件是否在任何路径上剪辑,但这些解决方案不起作用。
如果有人能提供哪怕是一个暗示的任何见解,那将是伟大的。提前感谢!

<?xml version="1.0" encoding="UTF-8"?>
    <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.35 218.01">
      <defs>
        <style>
          @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900');

          .cls-1 {
            letter-spacing: 0em;
          }

          .cls-2, .cls-3, .cls-4 {
            fill: #fff;
          }

          .cls-5 {
            fill: #fc0;
          }

          .cls-6 {
            fill: #ff2400;
          }

          .cls-7 {
            fill: #a30a24;
          }

          .cls-8 {
            letter-spacing: 0em;
          }

          .cls-9 {
            letter-spacing: -.04em;
          }

          .cls-10 {
            letter-spacing: 0em;
          }

          .cls-11 {
            letter-spacing: -.01em;
          }

          .cls-3 {
            font-family: "Lato";
            font-size: 11.99px;
            font-weight: 900;
          }

          .cls-12 {
            letter-spacing: 0em;
          }

          .cls-4 {
            font-family: "Lato";
            font-size: 11.55px;
          }
        </style>
      </defs>
      <g id="Layer_1-2" data-name="Layer 1">
        <g>
          <text class="cls-3" transform="translate(148.63 188.07)"><tspan class="cls-11" x="0" y="0">March 25, 2024 | 9AM to 5PM</tspan></text>
          
          <text class="cls-4" transform="translate(148.86 205.52)"><tspan x="0" y="0">ES Plaza, Los Baños, Laguna</tspan></text>
          
          
          <polygon class="cls-2" points="254.79 171.66 137.96 171.66 137.96 148.36 259.28 148.36 254.79 171.66"/>
          <rect class="cls-2" y="148.36" width="116.48" height="23.3"/>
          <g>
            <path class="cls-7" d="m147.81,169.19l6.08-17.4h5.08l5.75,17.4h-4.78l-.63-1.95h-6.16l-.67,1.95h-4.69Zm6.62-6.3h3.58l-1.79-5.87-1.78,5.87Z"/>
            <path class="cls-7" d="m166.29,169.19v-17.4h4.92c2.29,0,4.04.47,5.25,1.41,1.21.94,1.81,2.3,1.81,4.09,0,1.03-.25,1.92-.74,2.68s-1.16,1.28-2.02,1.57l3.83,7.64h-4.94l-3.6-7.45v7.45h-4.5Zm4.5-9.22h.44c.81,0,1.42-.18,1.85-.55.42-.37.63-.9.63-1.61s-.2-1.26-.61-1.63c-.41-.38-.99-.56-1.75-.56h-.56v4.36Z"/>
            <path class="cls-7" d="m187.41,156.19v13h-4.53v-13h-3.53l.46-4.4h10.63l.49,4.4h-3.53Z"/>
            <path class="cls-7" d="m199.37,169.19v-17.4h9.54l.7,4.62h-5.74v1.77h3.6v4.6h-3.6v6.4h-4.5Z"/>
            <path class="cls-7" d="m208.4,169.19l6.08-17.4h5.08l5.75,17.4h-4.78l-.63-1.95h-6.16l-.67,1.95h-4.69Zm6.62-6.3h3.58l-1.79-5.87-1.78,5.87Z"/>
            <path class="cls-7" d="m231.55,169.19h-4.5v-17.4h4.5v17.4Z"/>
            <path class="cls-7" d="m234.71,169.19v-17.4h4.92c2.29,0,4.04.47,5.25,1.41,1.21.94,1.81,2.3,1.81,4.09,0,1.03-.25,1.92-.74,2.68s-1.16,1.28-2.02,1.57l3.83,7.64h-4.94l-3.6-7.45v7.45h-4.5Zm4.5-9.22h.44c.81,0,1.42-.18,1.85-.55.42-.37.63-.9.63-1.61s-.2-1.26-.61-1.63c-.41-.38-.99-.56-1.75-.56h-.56v4.36Z"/>
          </g>
          <g>
            <path class="cls-2" d="m284.25,29.15h8.4v17.44h16.98v8.16h-16.98v17.51h-8.4v-17.51h-16.99v-8.16h16.99v-17.44Z"/>
            <g>
              <g>
                <path class="cls-5" d="m99.17,85.09V3.74h21.06v28.45h17.73V3.74h21.06v81.35h-21.06v-31.62h-17.73v31.62h-21.06Z"/>
                <path class="cls-5" d="m217.2,79.42c-3.48,2.22-7.16,3.89-11.03,5-3.87,1.11-7.94,1.67-12.2,1.67-8.93,0-16.15-2.74-21.67-8.22-5.52-5.48-8.28-12.59-8.28-21.34s2.9-15.91,8.7-21.84c5.8-5.93,12.92-8.89,21.37-8.89,6.22,0,11.67,1.76,16.34,5.28,4.67,3.52,8.06,8.43,10.17,14.73l-31.28,22c1,.41,2.04.71,3.11.92,1.07.2,2.28.31,3.61.31,3.15,0,6.4-.74,9.75-2.22,3.35-1.48,6.66-3.65,9.92-6.5l1.5,19.12Zm-35.45-23.06l17.78-12.84c-.78-.78-1.67-1.34-2.67-1.69-1-.35-2.17-.53-3.5-.53-3.19,0-5.97,1.22-8.36,3.67s-3.58,5.28-3.58,8.5c0,.44.03.91.08,1.39.06.48.14.98.25,1.5Z"/>
                <path class="cls-5" d="m223.2,85.09V26.57h19.23v6.06c1.37-2.15,3.09-3.76,5.17-4.83,2.07-1.07,4.63-1.67,7.67-1.78l.06,20.17h-2.28c-3.45,0-6.08.94-7.89,2.83-1.82,1.89-2.72,4.61-2.72,8.17v27.9h-19.23Z"/>
              </g>
              <g>
                <path class="cls-6" d="m101.67,83.06V1.71h21.06v28.45h17.73V1.71h21.06v81.35h-21.06v-31.62h-17.73v31.62h-21.06Z"/>
                <path class="cls-6" d="m219.7,77.39c-3.48,2.22-7.16,3.89-11.03,5-3.87,1.11-7.94,1.67-12.2,1.67-8.93,0-16.15-2.74-21.67-8.22-5.52-5.48-8.28-12.59-8.28-21.34s2.9-15.91,8.7-21.84c5.8-5.93,12.92-8.89,21.37-8.89,6.22,0,11.67,1.76,16.34,5.28,4.67,3.52,8.06,8.43,10.17,14.73l-31.28,22c1,.41,2.04.71,3.11.92,1.07.2,2.28.31,3.61.31,3.15,0,6.4-.74,9.75-2.22,3.35-1.48,6.66-3.65,9.92-6.5l1.5,19.12Zm-35.45-23.06l17.78-12.84c-.78-.78-1.67-1.34-2.67-1.69-1-.35-2.17-.53-3.5-.53-3.19,0-5.97,1.22-8.36,3.67s-3.58,5.28-3.58,8.5c0,.44.03.91.08,1.39.06.48.14.98.25,1.5Z"/>
                <path class="cls-6" d="m225.7,83.06V24.55h19.23v6.06c1.37-2.15,3.09-3.76,5.17-4.83,2.07-1.07,4.63-1.67,7.67-1.78l.06,20.17h-2.28c-3.45,0-6.08.94-7.89,2.83-1.82,1.89-2.72,4.61-2.72,8.17v27.9h-19.23Z"/>
              </g>
              <g>
                <path class="cls-2" d="m104.61,81.35V0h21.06v28.45h17.73V0h21.06v81.35h-21.06v-31.62h-17.73v31.62h-21.06Z"/>
                <path class="cls-2" d="m222.64,75.68c-3.48,2.22-7.16,3.89-11.03,5-3.87,1.11-7.94,1.67-12.2,1.67-8.93,0-16.15-2.74-21.67-8.22-5.52-5.48-8.28-12.59-8.28-21.34s2.9-15.91,8.7-21.84c5.8-5.93,12.92-8.89,21.37-8.89,6.22,0,11.67,1.76,16.34,5.28,4.67,3.52,8.06,8.43,10.17,14.73l-31.28,22c1,.41,2.04.71,3.11.92,1.07.2,2.28.31,3.61.31,3.15,0,6.4-.74,9.75-2.22,3.35-1.48,6.66-3.65,9.92-6.5l1.5,19.12Zm-35.45-23.06l17.78-12.84c-.78-.78-1.67-1.34-2.67-1.69-1-.35-2.17-.53-3.5-.53-3.19,0-5.97,1.22-8.36,3.67s-3.58,5.28-3.58,8.5c0,.44.03.91.08,1.39.06.48.14.98.25,1.5Z"/>
                <path class="cls-2" d="m228.65,81.35V22.84h19.23v6.06c1.37-2.15,3.09-3.76,5.17-4.83,2.07-1.07,4.63-1.67,7.67-1.78l.06,20.17h-2.28c-3.45,0-6.08.94-7.89,2.83-1.82,1.89-2.72,4.61-2.72,8.17v27.9h-19.23Z"/>
              </g>
            </g>
            <g>
              <g>
                <path class="cls-5" d="m100.5,139.43v-10.6c.66.3,1.26.52,1.78.66.52.14,1.02.21,1.49.21.86,0,1.54-.21,2.06-.63s.77-.96.77-1.62c0-.88-.93-2.17-2.8-3.89-.45-.41-.81-.74-1.09-1-1.01-.96-1.76-2.01-2.26-3.13-.5-1.12-.76-2.33-.76-3.61,0-3.19,1.15-5.69,3.45-7.5,2.3-1.81,5.5-2.71,9.59-2.71.77,0,1.58.04,2.43.13.85.09,1.75.21,2.71.39v9.96c-.64-.32-1.27-.56-1.9-.71-.62-.15-1.22-.22-1.8-.22-.84,0-1.49.18-1.98.53-.48.35-.72.83-.72,1.43,0,.39.13.79.39,1.2s.78,1.03,1.57,1.85c2.12,2.08,3.53,3.83,4.22,5.25.7,1.42,1.04,3,1.04,4.74,0,3.13-1.03,5.55-3.1,7.28-2.07,1.72-4.97,2.59-8.72,2.59-.73,0-1.55-.04-2.46-.11-.91-.08-2.22-.23-3.94-.47Z"/>
                <path class="cls-5" d="m131.41,138.18v79.83h-11.12v-112.08h10.92v3.24c1.37-1.24,2.77-2.15,4.21-2.71,1.43-.57,3.02-.85,4.75-.85,4.28,0,7.93,1.67,10.94,5.01,3.01,3.34,4.51,7.42,4.51,12.24,0,5.05-1.57,9.23-4.71,12.53-3.14,3.3-7.07,4.95-11.81,4.95-1.5,0-2.88-.18-4.14-.53-1.26-.35-2.45-.89-3.57-1.62Zm6.71-9.35c1.71,0,3.16-.58,4.35-1.75s1.78-2.58,1.78-4.22-.6-3.1-1.8-4.29c-1.2-1.19-2.65-1.78-4.34-1.78s-3.14.59-4.35,1.77c-1.21,1.18-1.82,2.61-1.82,4.3s.6,3.08,1.8,4.24c1.2,1.16,2.66,1.73,4.37,1.73Z"/>
                <path class="cls-5" d="m186.83,136.48c-2.01,1.29-4.14,2.25-6.38,2.89-2.24.64-4.59.96-7.05.96-5.16,0-9.34-1.58-12.53-4.75-3.19-3.17-4.79-7.28-4.79-12.34s1.68-9.2,5.03-12.63c3.35-3.43,7.47-5.14,12.35-5.14,3.6,0,6.75,1.02,9.44,3.05,2.7,2.03,4.66,4.87,5.88,8.51l-18.09,12.72c.58.24,1.18.41,1.8.53.62.12,1.32.18,2.09.18,1.82,0,3.7-.43,5.64-1.28,1.94-.86,3.85-2.11,5.73-3.76l.87,11.05Zm-20.5-13.33l10.28-7.42c-.45-.45-.96-.78-1.54-.98-.58-.2-1.25-.31-2.02-.31-1.84,0-3.45.71-4.83,2.12s-2.07,3.05-2.07,4.92c0,.26.02.52.05.8.03.28.08.57.14.87Z"/>
                <path class="cls-5" d="m212.47,139.5c-1.05.26-2.09.45-3.13.58-1.04.13-2.09.19-3.16.19-4.99,0-9.04-1.64-12.16-4.92-3.12-3.28-4.67-7.56-4.67-12.85s1.64-9.12,4.92-12.26c3.28-3.14,7.55-4.71,12.82-4.71.92,0,1.83.06,2.73.19.9.13,1.79.33,2.67.61v11.05c-1.07-.28-1.98-.48-2.73-.61-.75-.13-1.41-.19-1.99-.19-2.23,0-3.96.55-5.19,1.64-1.23,1.09-1.85,2.61-1.85,4.56s.65,3.41,1.94,4.56c1.3,1.16,3.01,1.73,5.16,1.73.6,0,1.27-.04,2.01-.13.74-.09,1.62-.21,2.65-.39v10.92Z"/>
                <path class="cls-5" d="m230.56,139.76c-.84.13-1.62.22-2.36.29-.74.06-1.46.1-2.17.1-3.68,0-6.22-.77-7.6-2.3-1.38-1.53-2.07-4.73-2.07-9.59v-12.24h-2.12v-10.09h2.12v-3.6l11.12-6.46v10.05h4.21v10.09h-4.21v7.61c0,1.84.22,3.06.66,3.66.44.6,1.27.9,2.49.9.47,0,.85-.01,1.14-.03.29-.02.57-.06.85-.13l-2.06,11.73Z"/>
                <path class="cls-5" d="m234.32,102.97v-10.25h11.12v10.25h-11.12Zm0,36.78v-33.83h11.12v33.83h-11.12Z"/>
                <path class="cls-5" d="m254.53,139.76l-8.35-33.83h11.73l3.41,20.59,3.5-20.59h11.69l-8.29,33.83h-13.69Z"/>
                <path class="cls-5" d="m306.12,136.48c-2.01,1.29-4.14,2.25-6.38,2.89-2.24.64-4.59.96-7.05.96-5.16,0-9.34-1.58-12.53-4.75s-4.79-7.28-4.79-12.34,1.68-9.2,5.03-12.63c3.35-3.43,7.47-5.14,12.35-5.14,3.6,0,6.75,1.02,9.44,3.05,2.7,2.03,4.66,4.87,5.88,8.51l-18.09,12.72c.58.24,1.18.41,1.8.53.62.12,1.32.18,2.09.18,1.82,0,3.7-.43,5.64-1.28,1.94-.86,3.85-2.11,5.73-3.76l.87,11.05Zm-20.5-13.33l10.28-7.42c-.45-.45-.96-.78-1.54-.98-.58-.2-1.25-.31-2.02-.31-1.84,0-3.45.71-4.84,2.12s-2.07,3.05-2.07,4.92c0,.26.02.52.05.8.03.28.08.57.14.87Z"/>
              </g>
              <g>
                <path class="cls-6" d="m101.96,138.14v-10.6c.66.3,1.26.52,1.78.66.52.14,1.02.21,1.49.21.86,0,1.54-.21,2.06-.63s.77-.96.77-1.62c0-.88-.93-2.17-2.8-3.89-.45-.41-.81-.74-1.09-1-1.01-.96-1.76-2.01-2.26-3.13-.5-1.12-.76-2.33-.76-3.61,0-3.19,1.15-5.69,3.45-7.5,2.3-1.81,5.5-2.71,9.59-2.71.77,0,1.58.04,2.43.13.85.09,1.75.21,2.71.39v9.96c-.64-.32-1.27-.56-1.9-.71-.62-.15-1.22-.22-1.8-.22-.84,0-1.49.18-1.98.53-.48.35-.72.83-.72,1.43,0,.39.13.79.39,1.2s.78,1.03,1.57,1.85c2.12,2.08,3.53,3.83,4.22,5.25.7,1.42,1.04,3,1.04,4.74,0,3.13-1.03,5.55-3.1,7.28-2.07,1.72-4.97,2.59-8.72,2.59-.73,0-1.55-.04-2.46-.11-.91-.08-2.22-.23-3.94-.47Z"/>
                <path class="cls-6" d="m132.87,136.89v81.13h-11.12v-113.38h10.92v3.24c1.37-1.24,2.77-2.15,4.21-2.71,1.43-.57,3.02-.85,4.75-.85,4.28,0,7.93,1.67,10.94,5.01,3.01,3.34,4.51,7.42,4.51,12.24,0,5.05-1.57,9.23-4.71,12.53-3.14,3.3-7.07,4.95-11.81,4.95-1.5,0-2.88-.18-4.14-.53-1.26-.35-2.45-.89-3.57-1.62Zm6.71-9.35c1.71,0,3.16-.58,4.35-1.75s1.78-2.58,1.78-4.22-.6-3.1-1.8-4.29c-1.2-1.19-2.65-1.78-4.34-1.78s-3.14.59-4.35,1.77c-1.21,1.18-1.82,2.61-1.82,4.3s.6,3.08,1.8,4.24c1.2,1.16,2.66,1.73,4.37,1.73Z"/>
                <path class="cls-6" d="m188.29,135.18c-2.01,1.29-4.14,2.25-6.38,2.89-2.24.64-4.59.96-7.05.96-5.16,0-9.34-1.58-12.53-4.75-3.19-3.17-4.79-7.28-4.79-12.34s1.68-9.2,5.03-12.63c3.35-3.43,7.47-5.14,12.35-5.14,3.6,0,6.75,1.02,9.44,3.05,2.7,2.03,4.66,4.87,5.88,8.51l-18.09,12.72c.58.24,1.18.41,1.8.53.62.12,1.32.18,2.09.18,1.82,0,3.7-.43,5.64-1.28,1.94-.86,3.85-2.11,5.73-3.76l.87,11.05Zm-20.5-13.33l10.28-7.42c-.45-.45-.96-.78-1.54-.98-.58-.2-1.25-.31-2.02-.31-1.84,0-3.45.71-4.83,2.12s-2.07,3.05-2.07,4.92c0,.26.02.52.05.8.03.28.08.57.14.87Z"/>
                <path class="cls-6" d="m213.93,138.2c-1.05.26-2.09.45-3.13.58-1.04.13-2.09.19-3.16.19-4.99,0-9.04-1.64-12.16-4.92-3.12-3.28-4.67-7.56-4.67-12.85s1.64-9.12,4.92-12.26c3.28-3.14,7.55-4.71,12.82-4.71.92,0,1.83.06,2.73.19.9.13,1.79.33,2.67.61v11.05c-1.07-.28-1.98-.48-2.73-.61-.75-.13-1.41-.19-1.99-.19-2.23,0-3.96.55-5.19,1.64-1.23,1.09-1.85,2.61-1.85,4.56s.65,3.41,1.94,4.56c1.3,1.16,3.01,1.73,5.16,1.73.6,0,1.27-.04,2.01-.13.74-.09,1.62-.21,2.65-.39v10.92Z"/>
                <path class="cls-6" d="m232.01,138.46c-.84.13-1.62.22-2.36.29-.74.06-1.46.1-2.17.1-3.68,0-6.22-.77-7.6-2.3-1.38-1.53-2.07-4.73-2.07-9.59v-12.24h-2.12v-10.09h2.12v-3.6l11.12-6.46v10.05h4.21v10.09h-4.21v7.61c0,1.84.22,3.06.66,3.66.44.6,1.27.9,2.49.9.47,0,.85-.01,1.14-.03.29-.02.57-.06.85-.13l-2.06,11.73Z"/>
                <path class="cls-6" d="m235.78,101.68v-10.25h11.12v10.25h-11.12Zm0,36.78v-33.83h11.12v33.83h-11.12Z"/>
                <path class="cls-6" d="m255.99,138.46l-8.35-33.83h11.73l3.41,20.59,3.5-20.59h11.69l-8.29,33.83h-13.69Z"/>
                <path class="cls-6" d="m307.58,135.18c-2.01,1.29-4.14,2.25-6.38,2.89-2.24.64-4.59.96-7.05.96-5.16,0-9.34-1.58-12.53-4.75s-4.79-7.28-4.79-12.34,1.68-9.2,5.03-12.63c3.35-3.43,7.47-5.14,12.35-5.14,3.6,0,6.75,1.02,9.44,3.05,2.7,2.03,4.66,4.87,5.88,8.51l-18.09,12.72c.58.24,1.18.41,1.8.53.62.12,1.32.18,2.09.18,1.82,0,3.7-.43,5.64-1.28,1.94-.86,3.85-2.11,5.73-3.76l.87,11.05Zm-20.5-13.33l10.28-7.42c-.45-.45-.96-.78-1.54-.98-.58-.2-1.25-.31-2.02-.31-1.84,0-3.45.71-4.84,2.12-1.38,1.41-2.07,3.05-2.07,4.92,0,.26.02.52.05.8.03.28.08.57.14.87Z"/>
              </g>
              <g>
                <path class="cls-2" d="m103.44,136.91v-10.6c.66.3,1.26.52,1.78.66.52.14,1.02.21,1.49.21.86,0,1.54-.21,2.06-.63s.77-.96.77-1.62c0-.88-.93-2.17-2.8-3.89-.45-.41-.81-.74-1.09-1-1.01-.96-1.76-2.01-2.26-3.13-.5-1.12-.76-2.33-.76-3.61,0-3.19,1.15-5.69,3.45-7.5,2.3-1.81,5.5-2.71,9.59-2.71.77,0,1.58.04,2.43.13.85.09,1.75.21,2.71.39v9.96c-.64-.32-1.27-.56-1.9-.71-.62-.15-1.22-.22-1.8-.22-.84,0-1.49.18-1.98.53-.48.35-.72.83-.72,1.43,0,.39.13.79.39,1.2s.78,1.03,1.57,1.85c2.12,2.08,3.53,3.83,4.22,5.25.7,1.42,1.04,3,1.04,4.74,0,3.13-1.03,5.55-3.1,7.28-2.07,1.72-4.97,2.59-8.72,2.59-.73,0-1.55-.04-2.46-.11-.91-.08-2.22-.23-3.94-.47Z"/>
                <path class="cls-2" d="m134.35,135.66v82.36h-11.12v-114.61h10.92v3.24c1.37-1.24,2.77-2.15,4.21-2.71,1.43-.57,3.02-.85,4.75-.85,4.28,0,7.93,1.67,10.94,5.01,3.01,3.34,4.51,7.42,4.51,12.24,0,5.05-1.57,9.23-4.71,12.53-3.14,3.3-7.07,4.95-11.81,4.95-1.5,0-2.88-.18-4.14-.53-1.26-.35-2.45-.89-3.57-1.62Zm6.71-9.35c1.71,0,3.16-.58,4.35-1.75,1.19-1.17,1.78-2.58,1.78-4.22s-.6-3.1-1.8-4.29c-1.2-1.19-2.65-1.78-4.34-1.78s-3.14.59-4.35,1.77c-1.21,1.18-1.82,2.61-1.82,4.3s.6,3.08,1.8,4.24c1.2,1.16,2.66,1.73,4.37,1.73Z"/>
                <path class="cls-2" d="m189.76,133.95c-2.01,1.29-4.14,2.25-6.38,2.89-2.24.64-4.59.96-7.05.96-5.16,0-9.34-1.58-12.53-4.75-3.19-3.17-4.79-7.28-4.79-12.34s1.68-9.2,5.03-12.63c3.35-3.43,7.47-5.14,12.35-5.14,3.6,0,6.75,1.02,9.44,3.05,2.7,2.03,4.66,4.87,5.88,8.51l-18.09,12.72c.58.24,1.18.41,1.8.53.62.12,1.32.18,2.09.18,1.82,0,3.7-.43,5.64-1.29,1.94-.86,3.85-2.11,5.73-3.76l.87,11.05Zm-20.5-13.33l10.28-7.42c-.45-.45-.96-.78-1.54-.98-.58-.2-1.25-.31-2.02-.31-1.84,0-3.45.71-4.83,2.12-1.38,1.41-2.07,3.05-2.07,4.92,0,.26.02.52.05.8.03.28.08.57.14.87Z"/>
                <path class="cls-2" d="m215.4,136.97c-1.05.26-2.09.45-3.13.58-1.04.13-2.09.19-3.16.19-4.99,0-9.04-1.64-12.16-4.92-3.12-3.28-4.67-7.56-4.67-12.85s1.64-9.12,4.92-12.26c3.28-3.14,7.55-4.71,12.82-4.71.92,0,1.83.06,2.73.19.9.13,1.79.33,2.67.61v11.05c-1.07-.28-1.98-.48-2.73-.61-.75-.13-1.41-.19-1.99-.19-2.23,0-3.96.55-5.19,1.64-1.23,1.09-1.85,2.61-1.85,4.56s.65,3.41,1.94,4.56c1.3,1.16,3.01,1.73,5.16,1.73.6,0,1.27-.04,2.01-.13.74-.09,1.62-.21,2.65-.39v10.92Z"/>
                <path class="cls-2" d="m233.49,137.23c-.84.13-1.62.22-2.36.29-.74.06-1.46.1-2.17.1-3.68,0-6.22-.77-7.6-2.3-1.38-1.53-2.07-4.73-2.07-9.59v-12.24h-2.12v-10.09h2.12v-3.6l11.12-6.46v10.06h4.21v10.09h-4.21v7.61c0,1.84.22,3.06.66,3.66.44.6,1.27.9,2.49.9.47,0,.85-.01,1.14-.03.29-.02.57-.06.85-.13l-2.06,11.73Z"/>
                <path class="cls-2" d="m237.25,100.45v-10.25h11.12v10.25h-11.12Zm0,36.78v-33.83h11.12v33.83h-11.12Z"/>
                <path class="cls-2" d="m257.46,137.23l-8.35-33.83h11.73l3.41,20.59,3.5-20.59h11.69l-8.29,33.83h-13.69Z"/>
                <path class="cls-2" d="m309.06,133.95c-2.01,1.29-4.14,2.25-6.38,2.89-2.24.64-4.59.96-7.05.96-5.16,0-9.34-1.58-12.53-4.75-3.19-3.17-4.79-7.28-4.79-12.34s1.68-9.2,5.03-12.63c3.35-3.43,7.47-5.14,12.35-5.14,3.6,0,6.75,1.02,9.44,3.05,2.7,2.03,4.66,4.87,5.88,8.51l-18.09,12.72c.58.24,1.18.41,1.8.53.62.12,1.32.18,2.09.18,1.82,0,3.7-.43,5.64-1.29,1.94-.86,3.85-2.11,5.73-3.76l.87,11.05Zm-20.5-13.33l10.28-7.42c-.45-.45-.96-.78-1.54-.98-.58-.2-1.25-.31-2.02-.31-1.84,0-3.45.71-4.84,2.12-1.38,1.41-2.07,3.05-2.07,4.92,0,.26.02.52.05.8.03.28.08.57.14.87Z"/>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
jjjwad0x

jjjwad0x1#

所以我解决了我的问题,但我没有解决问题。
问题是文本太大,无法放入视图框,所以我更改了文本的字体粗细,但问题仍然存在--某些字体系列在某些浏览器和设备上不起作用。
我试着导入字体,使用@font-face规则,并在标签中包含一个font-family属性,在大多数浏览器上都能用,但不是所有的。

frebpwbc

frebpwbc2#

一个简单的解决方案是使用the textLength attribute,如果文本或多或少是相同的,它就可以工作。
以下是一些例子:

svg {
  display: block;
  margin: 1em;
  width: 200px;
}
<svg viewBox="0 0 200 50">
  <rect width="200" height="50" fill="tomato"/>
  <text y="25" x="20" font-weight="bold" font-family="sans-serif" font-size="24"
    textLength="160" dominant-baseline="middle">9AM to 5PM</text>
</svg>
<svg viewBox="0 0 200 50">
  <rect width="200" height="50" fill="tomato"/>
  <text y="25" x="20" font-weight="bold" font-family="sans-serif" font-size="24"
    textLength="160" dominant-baseline="middle">12.00 to 17.00</text>
</svg>
<svg viewBox="0 0 200 50">
  <rect width="200" height="50" fill="tomato"/>
  <text y="25" x="20" font-weight="bold" font-family="monospace" font-size="24"
    textLength="160" dominant-baseline="middle">9AM to 5PM</text>
</svg>
<svg viewBox="0 0 200 50">
  <rect width="200" height="50" fill="tomato"/>
  <text y="25" x="20" font-weight="bold" font-family="system-ui" font-size="24"
    textLength="160" dominant-baseline="middle">9AM to 5PM</text>
</svg>

相关问题