Question

我在扩展SVG以适应窗口大小方面遇到了麻烦。

在这个例子中，我有一个波浪路径和一个文本元素，我想在这里实现的是将文本元素沿着波浪路径从左向右移动（由GSAP完成）并在中途停止初始载荷中的路径;当用户开始滚动时，它将移动到最后。

我的问题是，由SVG创建的波浪路径太长，即使路径的一半将离窗口，我试图使用viewBox缩小波浪路径，失败;使用css width: 100vw，失败了。

我还使用了css transform属性，它确实缩小了波浪路径，但这是一个固定的大小，我想让它尽可能响应，这意味着无论窗口宽度如何，文本元素总是先停在屏幕中间（波浪路径的一半），然后移动到屏幕的右侧。使用内联SVG元素时这是可能的吗？如果是这样，请指出我正确的方向。

提前谢谢！

（请在完整页面模式下查看示例，这将完美地解释我的问题，但滚动功能将被禁用，因为该模式中的高度为100vh，没有滚动空间）

＆＃13;

document.getElementById("MyPath").setAttribute("d", document.getElementById("Path").getAttribute("d"));
var tl = new TimelineMax({
  repeat: 0,
  delay: 1
});
tl.to("#Text", 3, {
  attr: {
    startOffset: '50%',
    opacity: 1
  }
});


window.addEventListener('scroll', function() {
  tl.to("#Text", 3, {
    attr: {
      startOffset: '100%',
      opacity: 0
    }
  });
}, true);

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
  background-color: #222;
}

svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  background-color: #fff;
  left: 0;
  top: 0;
  position: absolute;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/TextPlugin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<svg xml:space="preserve">
<defs><path id="MyPath"/></defs>
<path id="Path" fill="none" stroke="#000" stroke-miterlimit="10" d="M0,188.2c186.2,84,261.8,84.9,440,66.4s295.2-130,535.2-129.4c240,0.6,357,144.3,591.1,144.3
	s450.1-141.2,651.1-141.2c271.7,0,354.2,141.2,612.1,141.2c240,0,423-141.2,669.1-141.2c119.1,0,202.3,33.8,281,68.7"/>
<text font-size="7em" >
  <textPath id="Text" fill='#88CE02' font-family=Oswald xlink:href="#MyPath" opacity=0 startOffset="0%" letter-spacing="5px">Love the little things.</textPath>
  </text>
</svg>

＆＃13;

Answer 1

如果您希望SVG缩放以适合屏幕（或任何父容器），则需要具有viewBox属性。此属性告诉浏览器SVG内容的维度。没有它，浏览器就知道了需要缩放的程度。

你的路径宽约3780，底部是y = 144。因此viewBox的合理值将是：

viewBox="0 0 3780 150"

document.getElementById("MyPath").setAttribute("d", document.getElementById("Path").getAttribute("d"));
var tl = new TimelineMax({
  repeat: 0,
  delay: 1
});
tl.to("#Text", 3, {
  attr: {
    startOffset: '50%',
    opacity: 1
  }
});


window.addEventListener('scroll', function() {
  tl.to("#Text", 3, {
    attr: {
      startOffset: '100%',
      opacity: 0
    }
  });
}, true);

@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
  background-color: #222;
}

svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  background-color: #fff;
  left: 0;
  top: 0;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/TextPlugin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<svg viewBox="0 0 3780 150" xml:space="preserve">
<defs><path id="MyPath"/></defs>
<path id="Path" fill="none" stroke="#000" stroke-miterlimit="10" d="M0,188.2c186.2,84,261.8,84.9,440,66.4s295.2-130,535.2-129.4c240,0.6,357,144.3,591.1,144.3
	s450.1-141.2,651.1-141.2c271.7,0,354.2,141.2,612.1,141.2c240,0,423-141.2,669.1-141.2c119.1,0,202.3,33.8,281,68.7"/>
<text font-size="7em" >
  <textPath id="Text" fill='#88CE02' font-family=Oswald xlink:href="#MyPath" opacity=0 startOffset="0%" letter-spacing="5px">Love the little things.</textPath>
  </text>
</svg>

Answer 2

以下是您可以执行的操作：添加定义所需宽度的媒体查询，然后分别为svg元素中的text和path元素应用以下样式：

text {
  font-size: 2em;
}  

path {
  -webkit-transform: scale(.3);
  -ms-transform: scale(.3);
  transform: scale(.3);
}

请参阅下面的代码：

document.getElementById("MyPath").setAttribute("d", document.getElementById("Path").getAttribute("d"));
var tl = new TimelineMax({
  repeat: 0,
  delay: 1
});
tl.to("#Text", 3, {
  attr: {
    startOffset: '50%',
    opacity: 1
  }
});


window.addEventListener('scroll', function() {
  tl.to("#Text", 3, {
    attr: {
      startOffset: '100%',
      opacity: 0
    }
  });
}, true);

@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
  background-color: #222;
}

svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  background-color: #fff;
  left: 0;
  top: 0;
  position: absolute;
}

@media only screen and (max-width: 500px) {

  text {
    font-size: 2em;
  }  
  
  path {
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/TextPlugin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<svg xml:space="preserve">
<defs><path id="MyPath"/></defs>
<path id="Path" fill="none" stroke="#000" stroke-miterlimit="10" d="M0,188.2c186.2,84,261.8,84.9,440,66.4s295.2-130,535.2-129.4c240,0.6,357,144.3,591.1,144.3
	s450.1-141.2,651.1-141.2c271.7,0,354.2,141.2,612.1,141.2c240,0,423-141.2,669.1-141.2c119.1,0,202.3,33.8,281,68.7"/>
<text font-size="7em" >
  <textPath id="Text" fill='#88CE02' font-family=Oswald xlink:href="#MyPath" opacity=0 startOffset="0%" letter-spacing="5px">Love the little things.</textPath>
  </text>
</svg>

我希望它有所帮助！

如何缩放SVG路径以适合窗口大小？

2 个答案: