Scaled/Proportional 内联 SVG

Question

我使用一些内联 svg 作为剪辑路径和 AOS 库制作了这个动画部分。这个想法是用不同的动画对图像的每个切片进行动画处理。此标记有效并且支持 IE10+。但我真的不明白如何使这部分响应，我的意思是如果屏幕的宽度低于 svg 的固定宽度，我如何才能使整个部分适合屏幕的 100%（或更好的 90%）。请至少为我提供一个起点。非常感谢

这是一个工作代码笔（滚动动画在代码笔框中效果不佳，因此您必须上下调整框大小以测试动画）

CODEPEN

AOS.init();

.sezione-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    height: 50px;
    margin: 100px 0 250px 0;
    font-family: 'Raleway', sans-serif;
}
.cta-image-container svg{
    position: absolute;
}
.cta-image-container {
    width: 640px;
    height: 580px;
    margin: 0 25px 0 25px;
    filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
    position: relative;
}
.cta-image {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
}
.svg-cta-image {
    width: 640px;
    height: 580px;
}
.cta-image-1-3 {
clip-path: url(#split-1-3);
}
.cta-image-2-3 {
clip-path: url(#split-2-3);
}
.cta-image-3-3 {
clip-path: url(#split-3-3);
}
.cta-image-container:after {
    content: 'VIAGGIA';
    position: absolute;
    top: 0;
    left: 80px;
    font-size: 250px;
    font-weight: 600;
    line-height: 0.5;
    z-index: 0;
    color: #000;
    text-shadow: 6px 6px 7px rgba(0,0,0,0.5);
}
.sezione-cta .cta-text {
    width: 350px;
    margin: 0 25px -10px 25px;
}
.sezione-cta h3 {
    font-size: 35px;
    margin: 0;
    font-weight: 400;
}

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<svg class="split-defs" style="position:absolute;"><defs>
 <clipPath id="split-1-3"><polygon points="222,580 0,580 0.12,0 176,0"></polygon></clipPath>
 <clipPath id="split-2-3"><polygon points="400,0 196,0 242,580 446,580"></polygon></clipPath>
 <clipPath id="split-3-3"><polygon points="640,0 420,0 466,580 640,580"></polygon></clipPath>
 <filter id="desaturate"><feColorMatrix type="saturate" values="0"></feColorMatrix>
  </filter></defs></svg>

<div class="sezione-cta sezione-cta-viaggia">
 <div class="cta-image-container aos-init aos-animate" data-aos="fade-right" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out" data-aos-anchor-placement="bottom-bottom">
 <div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
  <svg class="svg-cta-image"><image filter="url(#desaturate)" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
 </div>
 <div data-aos="fade-down" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
  <svg class="svg-cta-image"><image width="640" height="580" class="cta-image cta-image-2-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
 </div>
 <div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
  <svg class="svg-cta-image"><image width="640" height="580" class="cta-image cta-image-3-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
 </div>
</div>

<div class="cta-text aos-init aos-animate" data-aos="fade-left" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out"><h3>Per noi viaggiare significa <b>EMOZIONARSI</b>. Abbiamo gli ingredienti giusti per rendere <b>il tuo viaggio memorabile!</b></h3></div>
</div>

Answer 1

目前，您页面上的所有内容都已指定绝对大小，在某些情况下，还指定了页面上的绝对位置。

您可以采用两种方法使您的页面响应：

为页面上的所有内容添加 media queries 以针对不同的浏览器宽度调整它们的大小。

@media（最小宽度：1000px）{ ...在这里设置大小的样式 }
相对于父容器设置事物大小的样式。

它们也不互斥。如果您执行 #2，那么您可以使用媒体查询来调整事物的大小或位置，以便在某些尺寸或方向上获得更好的布局。

即使您最终选择添加一些媒体查询。使用 #2 中的相对大小方法意味着您几乎肯定需要比使用方法 #1 所需的规则更少。

在下面的例子中我有：

创建了您的父容器 position: relative。当您这样做时，任何绝对定位的子元素都是相对于它的，而不是页面。
```
.sezione-cta {
  position: relative;
}
```
给你的 cta-image-container 一个相对于页面宽度的尺寸。
```
.cta-image-container {
  width: 45vw;
  height: 45vw;
}
```
给定您的 SVG viewBoxes，以便它们自动缩放
```
viewBox="0 0 640 580"
```
指定 SVG 宽度为 cta-image-container.
的 100%
```
.svg-cta-image {
  width: 100%;
}
```
为您的 "VIAGGA" 文本指定相对于其父项和页面宽度的大小和位置。
```
.cta-image-container:after {
  left: 25%;
  font-size: 17vw;
}
```

AOS.init();

.sezione-cta {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    height: 50px;
    margin: 100px 0 250px 0;
    font-family: 'Raleway', sans-serif;
    position: relative;
}
.cta-image-container {
    width: 45vw;
    height: 45vw;
    margin: 0 25px;
    filter: drop-shadow(6px 6px 7px rgba(0,0,0,0.5));
    position: relative;
}
.cta-image-container svg {
    position: absolute;
}
.svg-cta-image {
    width: 100%;
}
.cta-image-1-3 {
clip-path: url(#split-1-3);
}
.cta-image-2-3 {
clip-path: url(#split-2-3);
}
.cta-image-3-3 {
clip-path: url(#split-3-3);
}
.cta-image-container:after {
    content: 'VIAGGIA';
    position: absolute;
    top: 0;
    left: 25%;
    font-size: 17vw;
    font-weight: 600;
    line-height: 0.5;
    z-index: 0;
    color: #000;
    text-shadow: 6px 6px 7px rgba(0,0,0,0.5);
}
.sezione-cta .cta-text {
    width: 350px;
    margin: 0 25px 0 25px;
}
.sezione-cta h3 {
    font-size: 35px;
    margin: 0;
    font-weight: 400;
}

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<svg class="split-defs" style="position:absolute;"><defs>
 <clipPath id="split-1-3"><polygon points="222,580 0,580 0.12,0 176,0"></polygon></clipPath>
 <clipPath id="split-2-3"><polygon points="400,0 196,0 242,580 446,580"></polygon></clipPath>
 <clipPath id="split-3-3"><polygon points="640,0 420,0 466,580 640,580"></polygon></clipPath>
 <filter id="desaturate"><feColorMatrix type="saturate" values="0"></feColorMatrix>
  </filter></defs></svg>

<div class="sezione-cta sezione-cta-viaggia">
  <div class="cta-image-container aos-init aos-animate" data-aos="fade-right" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out" data-aos-anchor-placement="bottom-bottom">
    <div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
      <svg class="svg-cta-image" viewBox="0 0 640 580"><image filter="url(#desaturate)" width="640" height="580" class="cta-image cta-image-1-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
    </div>
    <div data-aos="fade-down" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
      <svg class="svg-cta-image" viewBox="0 0 640 580"><image width="640" height="580" class="cta-image cta-image-2-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
    </div>
    <div data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="1500" data-aos-anchor-placement="bottom-bottom" class="aos-init aos-animate">
      <svg class="svg-cta-image" viewBox="0 0 640 580"><image width="640" height="580" class="cta-image cta-image-3-3" xlink:href="https://anekitalia.com/wp-content/uploads/media/justfun-viaggi-evento-viaggia-split.jpg"></image></svg>
    </div>
  </div>

  <div class="cta-text aos-init aos-animate" data-aos="fade-left" data-aos-offset="0" data-aos-duration="2000" data-aos-easing="ease-in-out"><h3>Per noi viaggiare significa <b>EMOZIONARSI</b>. Abbiamo gli ingredienti giusti per rendere <b>il tuo viaggio memorabile!</b></h3></div>
</div>

Scaled/Proportional 内联 SVG

Scaled/Proportional inline SVG

html

css

svg

inline-svg