比例/比例内插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

目前，页面上的所有内容都有绝对大小，在某些情况下，页面上的位置也是绝对的。

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

1. 为页面上的每一件事物添加媒体查询，以便根据不同的浏览器宽度调整它们的大小。 @media (最小宽度:1000 min){.这里的东西大小的样式}
2. 样式:相对于其父容器的事物的大小。

它们也不是相互排斥的。如果您这样做#2，那么您可以使用媒体查询来调整事物的大小或位置，以便在某些大小或方向上进行更好的布局。

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

在下面的示例中：

1. 使父容器position: relative。当您这样做时，任何绝对定位的子元素都是相对的，而不是页面。 ..sezione cta{位置:相对；}
2. 给cta-image-container一个相对于页面宽度的大小。 ..cta图像容器{宽度:45；高度:45；}
3. 给定您的SVGs，使它们自动缩放。 viewBox="0 0 6 40 580“
4. 指定的SVG宽度为cta-image-container的100%。 .图像{宽度: 100%；}
5. 给你的"VIAGGA“文本的大小和位置，相对于它的父和页面宽度。 ..cta图像容器：{左: 25%；字体大小:17 25；}

​

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>

​