CSS中的SVG图像格式化问题

发布于 2025-02-09 11:35:14 字数 7682 浏览 1 评论 0原文

我正在尝试实现与Lando Norris'网站他的成就水平滚动。我尝试通过创建SVG图像，然后在CSS的帮助下将其格式化来重新创建它。不过，它似乎对大多数Web浏览器都不起作用。我应该改变重新创建此水平横幅的方法，还是有办法使图像正确显示？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>PawelosFPV achievements</title>
  <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|PT+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      position: relative;
    }
    
    :root {
      font-family: "PT Sans", sans-serif;
      font-size: 20px;
    }
    
    body {
      background-color: #EFF1ED;
      min-height: 100vh;
    }
    
    h1 {
      color: #161032;
      font-family: "Baloo Tamma", sans-serif;
      font-size: 1.5rem;
    }
    
    h1::after {
      background-color: #00A8E8;
      bottom: 0;
      content: "";
      display: block;
      height: 0.25rem;
      position: absolute;
      width: 1rem;
    }
    
    p {
      color: rgba(0, 0, 0, 0.8);
    }
    
    .container {
      margin: 0 auto 2rem;
      max-width: 900px;
      padding: 0 1.5rem;
    }
    
    .sample-item {
      width: auto;
      height: 125px;
      vertical-align: middle;
      padding-right: 20px;
    }
    
    .horizontal-scrolling-banner {
      overflow: hidden;
    }
    
    .horizontal-scrolling-banner__helper-wrapper {
      align-items: center;
      display: flex;
      left: 0;
      transform: translateZ(0);
      transition-property: left;
      transition-timing-function: linear;
    }
  </style>

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="container">

  </div>

  <div class="horizontal-scrolling-banner">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Riga-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Modena-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Sumo-Challange-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Junior-Championship-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Championship-2019-V2.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Salina-Turda-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-VADUZ-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-TURIN-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/VICE-FAI-World-Cup-Ranking-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Laax-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/IDSC-Korea-Yeongwol.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/EPFL-FAI-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/XFLY-Tianjin-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Partouche-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2020.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2020.svg" class="sample-item">

  </div>
  </div>
  <!-- partial -->
  <script>
    (function horizontalScrollingBanner() {
      var banners = document.getElementsByClassName('horizontal-scrolling-banner');
      if (!banners || banners.length === 0) {
        return;
      }
      var pxPerSecond = 25;
      setUpElements();
      scrollTheBanners();
      window.addEventListener('resize', setUpElements);

      function setUpElements() {
        for (var i = 0; i < banners.length; i++) {
          var currentBanner = banners[i];
          var helperWrapperClass = 'horizontal-scrolling-banner__helper-wrapper';
          var currentHelperWrapper = currentBanner.querySelector('.' + helperWrapperClass);
          if (currentHelperWrapper) {
            var clones = currentHelperWrapper.querySelectorAll('[data-clone]');
            Array.prototype.forEach.call(clones, function(clone) {
              clone.remove();
            });
            var childrenCount = currentHelperWrapper.children.length;
            for (var i = 0; i < childrenCount; i++) {
              currentBanner.appendChild(currentHelperWrapper.children[0]);
            }
            currentHelperWrapper.remove();
          }

          var children = currentBanner.children;

          var bannerWidth = currentBanner.getBoundingClientRect().width;
          var minWidthToCoverBanner = (bannerWidth * 2) + children[0].getBoundingClientRect().width;
          var childrenWidth = Array.prototype.reduce.call(children, function(r, child) {
            return r + child.getBoundingClientRect().width;
          }, 0);
          var currentWidth = childrenWidth;


          do {
            Array.prototype.forEach.call(children, function(child) {
              var clone = child.cloneNode();
              clone.setAttribute('aria-hidden', true);
              clone.dataset.clone = true;
              currentBanner.appendChild(clone);
            });
            currentWidth += childrenWidth;
          } while (currentWidth < minWidthToCoverBanner);

          var transitionHelperWrapper = document.createElement('div');
          transitionHelperWrapper.classList.add('horizontal-scrolling-banner__helper-wrapper');
          var childrenCount = children.length;
          for (var i = 0; i < childrenCount; i++) {
            transitionHelperWrapper.appendChild(children[0]);
          }
          currentBanner.appendChild(transitionHelperWrapper);
          transitionHelperWrapper.dataset.childrenWidth = childrenWidth;
        }
      }

      function scrollTheBanners() {
        for (var i = 0; i < banners.length; i++) {
          var helperWrapper = banners[i].firstElementChild;
          var childrenWidth = helperWrapper.dataset.childrenWidth;
          var offsetLeft = helperWrapper.offsetLeft;

          if (offsetLeft <= (childrenWidth * -1)) {
            helperWrapper.style.transitionDuration = '0s';
            helperWrapper.style.left = '0px';
            helperWrapper.style.removeProperty('transition-duration');
          } else if (helperWrapper.style.left === '' || helperWrapper.style.left === '0px') {
            setTimeout(function() {
              helperWrapper.style.transitionDuration = (childrenWidth / pxPerSecond).toFixed() + 's';
              helperWrapper.style.left = (childrenWidth * -1) + 'px';
            }, 0);
          }
        }
        requestAnimationFrame(scrollTheBanners);
      }
    })();
  </script>
</body>

</html>

原文

I'm trying to achieve a similar effect to Lando Norris' website where his achievements scroll horizontally. I tried recreating that by creating svg images and then formatting them with the help of css. It doesn't seem to work on most web browsers though. Should I change my approach at recreating this horizontal banner or is there a way to make the images display properly?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>PawelosFPV achievements</title>
  <link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|PT+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      position: relative;
    }
    
    :root {
      font-family: "PT Sans", sans-serif;
      font-size: 20px;
    }
    
    body {
      background-color: #EFF1ED;
      min-height: 100vh;
    }
    
    h1 {
      color: #161032;
      font-family: "Baloo Tamma", sans-serif;
      font-size: 1.5rem;
    }
    
    h1::after {
      background-color: #00A8E8;
      bottom: 0;
      content: "";
      display: block;
      height: 0.25rem;
      position: absolute;
      width: 1rem;
    }
    
    p {
      color: rgba(0, 0, 0, 0.8);
    }
    
    .container {
      margin: 0 auto 2rem;
      max-width: 900px;
      padding: 0 1.5rem;
    }
    
    .sample-item {
      width: auto;
      height: 125px;
      vertical-align: middle;
      padding-right: 20px;
    }
    
    .horizontal-scrolling-banner {
      overflow: hidden;
    }
    
    .horizontal-scrolling-banner__helper-wrapper {
      align-items: center;
      display: flex;
      left: 0;
      transform: translateZ(0);
      transition-property: left;
      transition-timing-function: linear;
    }
  </style>

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="container">

  </div>

  <div class="horizontal-scrolling-banner">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Riga-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Modena-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Sumo-Challange-2018.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Junior-Championship-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Championship-2019-V2.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Salina-Turda-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-VADUZ-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-TURIN-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/VICE-FAI-World-Cup-Ranking-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Laax-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/IDSC-Korea-Yeongwol.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/EPFL-FAI-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/XFLY-Tianjin-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Partouche-2019.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2020.svg" class="sample-item">
    <img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2020.svg" class="sample-item">

  </div>
  </div>
  <!-- partial -->
  <script>
    (function horizontalScrollingBanner() {
      var banners = document.getElementsByClassName('horizontal-scrolling-banner');
      if (!banners || banners.length === 0) {
        return;
      }
      var pxPerSecond = 25;
      setUpElements();
      scrollTheBanners();
      window.addEventListener('resize', setUpElements);

      function setUpElements() {
        for (var i = 0; i < banners.length; i++) {
          var currentBanner = banners[i];
          var helperWrapperClass = 'horizontal-scrolling-banner__helper-wrapper';
          var currentHelperWrapper = currentBanner.querySelector('.' + helperWrapperClass);
          if (currentHelperWrapper) {
            var clones = currentHelperWrapper.querySelectorAll('[data-clone]');
            Array.prototype.forEach.call(clones, function(clone) {
              clone.remove();
            });
            var childrenCount = currentHelperWrapper.children.length;
            for (var i = 0; i < childrenCount; i++) {
              currentBanner.appendChild(currentHelperWrapper.children[0]);
            }
            currentHelperWrapper.remove();
          }

          var children = currentBanner.children;

          var bannerWidth = currentBanner.getBoundingClientRect().width;
          var minWidthToCoverBanner = (bannerWidth * 2) + children[0].getBoundingClientRect().width;
          var childrenWidth = Array.prototype.reduce.call(children, function(r, child) {
            return r + child.getBoundingClientRect().width;
          }, 0);
          var currentWidth = childrenWidth;


          do {
            Array.prototype.forEach.call(children, function(child) {
              var clone = child.cloneNode();
              clone.setAttribute('aria-hidden', true);
              clone.dataset.clone = true;
              currentBanner.appendChild(clone);
            });
            currentWidth += childrenWidth;
          } while (currentWidth < minWidthToCoverBanner);

          var transitionHelperWrapper = document.createElement('div');
          transitionHelperWrapper.classList.add('horizontal-scrolling-banner__helper-wrapper');
          var childrenCount = children.length;
          for (var i = 0; i < childrenCount; i++) {
            transitionHelperWrapper.appendChild(children[0]);
          }
          currentBanner.appendChild(transitionHelperWrapper);
          transitionHelperWrapper.dataset.childrenWidth = childrenWidth;
        }
      }

      function scrollTheBanners() {
        for (var i = 0; i < banners.length; i++) {
          var helperWrapper = banners[i].firstElementChild;
          var childrenWidth = helperWrapper.dataset.childrenWidth;
          var offsetLeft = helperWrapper.offsetLeft;

          if (offsetLeft <= (childrenWidth * -1)) {
            helperWrapper.style.transitionDuration = '0s';
            helperWrapper.style.left = '0px';
            helperWrapper.style.removeProperty('transition-duration');
          } else if (helperWrapper.style.left === '' || helperWrapper.style.left === '0px') {
            setTimeout(function() {
              helperWrapper.style.transitionDuration = (childrenWidth / pxPerSecond).toFixed() + 's';
              helperWrapper.style.left = (childrenWidth * -1) + 'px';
            }, 0);
          }
        }
        requestAnimationFrame(scrollTheBanners);
      }
    })();
  </script>
</body>

</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱给你人给你 2025-02-16 11:35:14

字体是不是自动嵌入

SVG中使用的本地安装字体，除非您的网站/应用程序的用户无需使用此特定字体。

此外，由于安全策略， Firefox通常拒绝本地字体文件使用（可以在如下所述：“ firefox中的自定义（系统安装）字体

= “

？在通过转换文本保存为SVG之前应该使用
@font-face使用数据URL来嵌入字体。像 transfonter 也可以帮助

您使用您的字体的开源替代方案，例如SIL ofl v1.1许可 font noreferrer“> font squirrel

仍然很奇怪的字母间隔？

Illustrator通常将文本元素分为单独的＆lt; text＆gt;或＆lt; tspan＆gt;元素。这通常是由定制的间距/kerning值引起的。

<text class="cls-1" transform="translate(133.05 117.67)">2018</text>
<text class="cls-2" transform="translate(143.07 61.95)">1<tspan class="cls-3" x="19.99" y="0">S</tspan>
<tspan x="39.83" y="0">T</tspan>
</text><text class="cls-4" transform="translate(57.23 179.3)">SUMO CHAL<tspan class="cls-5" x="147.92" y="0">L</tspan>
<tspan x="162.25" y="0">ANGE</tspan>
</text>

不幸的是，标记仅适用于此特定字体。因此，您可能需要像这样简化结构：

<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>

示例：嵌入式VS未嵌入字体

img,
svg{
  height:200px
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700" rel="stylesheet">

<p>Font embedded</p>
  <img src="https://svgshare.com/i/iW8.svg" class="sample-item">
<p>Font not embedded (fallback font is used)</p>
  <img src="https://svgshare.com/i/iY4.svg" class="sample-item">
  
<p>Inline SVG - using Webfont (Roboto)</p>
<svg  id="Achievement" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 185">
  <defs>
    <style>
      text {
font-family: 'Roboto Condensed', sans-serif;
        font-size: 32px;
        font-weight: bold;
      }
    </style>
  </defs>
  <path id="wreath" d="M2.4 88.7c0-0.3 8.9 0.8 20.8 12.8a58.6 58.6 0 0 1-4.3-8.9c-13.4-3.7-15.9-9.4-19-19.5c1.3 2.6 10.3 4.8 12.7 9c1.8 3.3 3.8 6.4 5.5 8a51.4 51.4 0 0 1-1.9-8.3c-0.1-0.5-0.1-0.9-0.2-1.3c-4.4-2.2-14.6-9.4-15.3-23.2c2 2.9 9.3 2.6 14.9 18.5a82.9 82.9 0 0 1 0.2-9.3c-4.3-3.5-12.5-13.9-11-35c1.7 3.3 10.4 14.3 10.8 21.9a60.7 60.7 0 0 0 0.8 7.3c0.1-0.6 0.1-1.1 0.2-1.7a67.3 67.3 0 0 1 1.6-8.2a26.1 26.1 0 0 0-4.7-10.9a9.8 9.8 0 0 1-1.1-11c1.2-2.6 0.6-8.5 0.6-8.5s8.2 8.2 6.1 27.4a61.7 61.7 0 0 1 2.7-6.9a15.3 15.3 0 0 0-1.3-8.7c-2.2-4.7-4.8-12 1.3-22.9c0.1 4.3 3.8 11.4 3.4 16.9a76.8 76.8 0 0 1-1.8 11.5a57.8 57.8 0 0 1 3.7-6c0.3-2.9-1.1-7-0.9-14.2c0.2-8.7 4-10.5 4.9-15.2c3.4 9 1.5 19.4-1.2 25.6l0.8-1c0.9-1.2 1.8-2.3 2.6-3.4a35.1 35.1 0 0 1 3.7-15.4c1.7-3 6.8-5.5 6.9-8c1.3 9.3-3.2 15.6-7.3 20.2l0 0.1a14.6 14.6 0 0 1 16-2.8s-5.3 4.9-9.7 5.3c-4.2 0.3-6.3 0-8.6 1.4c-0.7 1-1.6 2.1-2.5 3.2c5.7-3.1 14.2-0.1 17.5 2c-4.8 3.8-9.6 2.9-12.3 1.1c-2.4-1.6-5.2-0.1-6.9-0.9a70.2 70.2 0 0 0-4.4 6.3a61.2 61.2 0 0 0-3.7 7.8c3.1-4.4 8.5-9.7 15.3-9.9c-0.2 2.8-3.3 8.2-7.7 10.7c-3.6 2-7.3 2.9-9.4 4.7a65.1 65.1 0 0 0-2 10v0.1c4-10.1 15.2-14.7 18.2-14.9c0 0-5 3.6-5.3 8.3s-4.8 7.2-8.8 8.5a8.8 8.8 0 0 0-4.7 4.1a77.5 77.5 0 0 0 0 12.9c1.3-19.3 14.5-19.3 14.5-19.3a7.8 7.8 0 0 0-2.4 5c-0.4 3.4-1.2 6.1-5.3 10.6a21 21 0 0 0-5.5 11.3a54 54 0 0 0 5.8 13.9c-2.4-6-3.9-14.4-0.8-21.7c0.5 4.2 6.8 10.4 6.8 15.6c0 4.5-1.8 10.4-0.3 14.2c0.8 0.9 1.6 1.9 2.5 2.8c-0.4-2.7-0.1-6.7-0.7-9.5c1.5 2.2 2.4 8.2 3.4 12.3a71 71 0 0 0 6 5.1c-5.1-6-7.7-15.7-6.6-24.8c3.7 3.6 8.7 11.1 8.9 16.9a28.1 28.1 0 0 0 3.7 11.9l1.1 0.6c1.1 0.6 2.3 1.2 3.4 1.7c-5.6-5-7-14.1-7-18.1c6.3 4.4 13 14.6 13.8 20.6c1.2 0.3 2.4 0.6 3.6 0.9c4.8 0.9 10.2 1 14.5-1.3l0.3 0.5h0l0.3 0.5l0.5 1c-5.1 2.6-10.9 2.5-16 1.5a47.4 47.4 0 0 1-5.5-1.5c-2.3 3.8-8.5 7.2-12.4 6.8s-8.2-2.4-10.9-1.5c3.6-6 9.8-7.7 13.9-6.3c3.6 1.2 6.1 1.6 8 0.5a56.2 56.2 0 0 1-7.5-3.4l-1-0.5c-4.9 3-11.2 2.5-15.3 1.1c-4.6-1.5-6.3-6.1-10.1-8.1c9.6-2.5 14.8 0.9 17 3a9.8 9.8 0 0 0 6.5 2.9a66.4 66.4 0 0 1-10.3-7.9c-2.7-0.1-8.3 1.7-12.4-1.7c4-1.3 7.1-1.7 9.8-0.9c-0.9-0.9-1.7-1.8-2.5-2.8c-3.1 0.1-8.7 2-13-0.4a70.7 70.7 0 0 1-10.9-8.1s7.3-0.3 11.2 0.7c-3.6-2-14.3-13.4-14.3-13.7z" />
  <use href="#wreath" style="transform: translate(100%,0) scale(-1, 1);" />
  </use>
  <text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
  <text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
    AWARD
  </text>
</svg>

Inline SVG（附加到您的HTML主体）可以使用通过@font-face加载的WebFonts。不幸的是，您的轮播脚本仅支持单个元素（没有嵌套子节点）。

Fonts are are not automatically embedded

Locally installed fonts used in svg are not available for users of your website/app unless they happen to have this particular font installed.

Besides firefox usually rejects local font file usage due to security policies (could be changed in settings as described here: "Custom (System installed) fonts in Firefox?")

Some options:

Open your svg in Illustrator and convert text to (path) outlines before saving as svg via convert text to outlines selcting all elements by CTRLa and CTRLshiftO should do the trick
embed the font via @font-face using a data URL. A tool like transfonter can help

You should also concider using an open source alternative to your font like the SIL OFL v1.1 licensed "D-Din" available on font squirrel

Still weird letter spacing?

Illustrator often splits text elements into seperate <text>or <tspan> elements. This is usually caused by customized spacing/kerning values.

<text class="cls-1" transform="translate(133.05 117.67)">2018</text>
<text class="cls-2" transform="translate(143.07 61.95)">1<tspan class="cls-3" x="19.99" y="0">S</tspan>
<tspan x="39.83" y="0">T</tspan>
</text><text class="cls-4" transform="translate(57.23 179.3)">SUMO CHAL<tspan class="cls-5" x="147.92" y="0">L</tspan>
<tspan x="162.25" y="0">ANGE</tspan>
</text>

Unfortunately markup will only work for this particular font. So you might need to simplify your structure like so:

<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>

Example: embedded vs not embedded font

img,
svg{
  height:200px
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700" rel="stylesheet">

<p>Font embedded</p>
  <img src="https://svgshare.com/i/iW8.svg" class="sample-item">
<p>Font not embedded (fallback font is used)</p>
  <img src="https://svgshare.com/i/iY4.svg" class="sample-item">
  
<p>Inline SVG - using Webfont (Roboto)</p>
<svg  id="Achievement" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 185">
  <defs>
    <style>
      text {
font-family: 'Roboto Condensed', sans-serif;
        font-size: 32px;
        font-weight: bold;
      }
    </style>
  </defs>
  <path id="wreath" d="M2.4 88.7c0-0.3 8.9 0.8 20.8 12.8a58.6 58.6 0 0 1-4.3-8.9c-13.4-3.7-15.9-9.4-19-19.5c1.3 2.6 10.3 4.8 12.7 9c1.8 3.3 3.8 6.4 5.5 8a51.4 51.4 0 0 1-1.9-8.3c-0.1-0.5-0.1-0.9-0.2-1.3c-4.4-2.2-14.6-9.4-15.3-23.2c2 2.9 9.3 2.6 14.9 18.5a82.9 82.9 0 0 1 0.2-9.3c-4.3-3.5-12.5-13.9-11-35c1.7 3.3 10.4 14.3 10.8 21.9a60.7 60.7 0 0 0 0.8 7.3c0.1-0.6 0.1-1.1 0.2-1.7a67.3 67.3 0 0 1 1.6-8.2a26.1 26.1 0 0 0-4.7-10.9a9.8 9.8 0 0 1-1.1-11c1.2-2.6 0.6-8.5 0.6-8.5s8.2 8.2 6.1 27.4a61.7 61.7 0 0 1 2.7-6.9a15.3 15.3 0 0 0-1.3-8.7c-2.2-4.7-4.8-12 1.3-22.9c0.1 4.3 3.8 11.4 3.4 16.9a76.8 76.8 0 0 1-1.8 11.5a57.8 57.8 0 0 1 3.7-6c0.3-2.9-1.1-7-0.9-14.2c0.2-8.7 4-10.5 4.9-15.2c3.4 9 1.5 19.4-1.2 25.6l0.8-1c0.9-1.2 1.8-2.3 2.6-3.4a35.1 35.1 0 0 1 3.7-15.4c1.7-3 6.8-5.5 6.9-8c1.3 9.3-3.2 15.6-7.3 20.2l0 0.1a14.6 14.6 0 0 1 16-2.8s-5.3 4.9-9.7 5.3c-4.2 0.3-6.3 0-8.6 1.4c-0.7 1-1.6 2.1-2.5 3.2c5.7-3.1 14.2-0.1 17.5 2c-4.8 3.8-9.6 2.9-12.3 1.1c-2.4-1.6-5.2-0.1-6.9-0.9a70.2 70.2 0 0 0-4.4 6.3a61.2 61.2 0 0 0-3.7 7.8c3.1-4.4 8.5-9.7 15.3-9.9c-0.2 2.8-3.3 8.2-7.7 10.7c-3.6 2-7.3 2.9-9.4 4.7a65.1 65.1 0 0 0-2 10v0.1c4-10.1 15.2-14.7 18.2-14.9c0 0-5 3.6-5.3 8.3s-4.8 7.2-8.8 8.5a8.8 8.8 0 0 0-4.7 4.1a77.5 77.5 0 0 0 0 12.9c1.3-19.3 14.5-19.3 14.5-19.3a7.8 7.8 0 0 0-2.4 5c-0.4 3.4-1.2 6.1-5.3 10.6a21 21 0 0 0-5.5 11.3a54 54 0 0 0 5.8 13.9c-2.4-6-3.9-14.4-0.8-21.7c0.5 4.2 6.8 10.4 6.8 15.6c0 4.5-1.8 10.4-0.3 14.2c0.8 0.9 1.6 1.9 2.5 2.8c-0.4-2.7-0.1-6.7-0.7-9.5c1.5 2.2 2.4 8.2 3.4 12.3a71 71 0 0 0 6 5.1c-5.1-6-7.7-15.7-6.6-24.8c3.7 3.6 8.7 11.1 8.9 16.9a28.1 28.1 0 0 0 3.7 11.9l1.1 0.6c1.1 0.6 2.3 1.2 3.4 1.7c-5.6-5-7-14.1-7-18.1c6.3 4.4 13 14.6 13.8 20.6c1.2 0.3 2.4 0.6 3.6 0.9c4.8 0.9 10.2 1 14.5-1.3l0.3 0.5h0l0.3 0.5l0.5 1c-5.1 2.6-10.9 2.5-16 1.5a47.4 47.4 0 0 1-5.5-1.5c-2.3 3.8-8.5 7.2-12.4 6.8s-8.2-2.4-10.9-1.5c3.6-6 9.8-7.7 13.9-6.3c3.6 1.2 6.1 1.6 8 0.5a56.2 56.2 0 0 1-7.5-3.4l-1-0.5c-4.9 3-11.2 2.5-15.3 1.1c-4.6-1.5-6.3-6.1-10.1-8.1c9.6-2.5 14.8 0.9 17 3a9.8 9.8 0 0 0 6.5 2.9a66.4 66.4 0 0 1-10.3-7.9c-2.7-0.1-8.3 1.7-12.4-1.7c4-1.3 7.1-1.7 9.8-0.9c-0.9-0.9-1.7-1.8-2.5-2.8c-3.1 0.1-8.7 2-13-0.4a70.7 70.7 0 0 1-10.9-8.1s7.3-0.3 11.2 0.7c-3.6-2-14.3-13.4-14.3-13.7z" />
  <use href="#wreath" style="transform: translate(100%,0) scale(-1, 1);" />
  </use>
  <text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
  <text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
    AWARD
  </text>
</svg>

Inline svg (appended to your html body) could use webfonts loaded via @font-face. Unfortunately your carousel script apparenty only support single elements (without nested child nodes).

回复收藏 0 原文

~没有更多了~