html - 缩放/比例内联 SVG

Question

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

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

编解码器

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 (min-width: 1000px) { ... 在这里设置大小的样式}

2. 设置事物相对于其父容器的大小的样式。

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

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

在以下示例中，我有：

1. 制作了您的父容器position: relative。当你这样做时，任何绝对定位的子元素都是相对于那个，而不是页面。

   .sezione-cta {
     position: relative;
   }
   

2. 给你cta-image-container一个相对于页面宽度的大小。

   .cta-image-container {
     width: 45vw;
     height: 45vw;
   }
   

3. 给定您的 SVG 视图框，以便它们自动缩放

   viewBox="0 0 640 580"
   

4. 指定 SVG 宽度为cta-image-container.

   .svg-cta-image {
     width: 100%;
   }
   

5. 给你的“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>