添加 SVG 元素并使其具有响应性

Posted 2023-03-06

【中文标题】添加 SVG 元素并使其具有响应性

【英文标题】：Adding an SVG Element and also making it responsive

【发布时间】：2020-11-28 22:49:07

【问题描述】：

我无法将 SVG 波形图片添加到我的背景中，同时也使其响应。我正在尝试将波浪添加到我预先存在的背景图像中，以使其看起来更具吸引力。虽然我成功添加了一个，但我很快意识到，如果我放大网站，我最新添加的内容非常时髦。任何人都可以在这里分享一些想法/代码来帮助我吗？

我已经尝试过的

我在发布之前做了我的研究。我查看了之前在 *** 上发布的问题，并尝试复制提供的想法，但没有成功。我在下面发布的代码中证明了这一点。

以下是我的代码的 sn-p。

HTML

这是我正在尝试使用的代码部分。

<section class="site-title">
            <div class="site-background">
                <h1>Who Am I?</h1>

                <h2>I am a 
                <span class="txt-type" data-wait = "5000" data-words = '["example", "example"]'></span>
            </h2>

            <div class = "svg">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="#ffffff" fill-opacity="1" d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>
            </div>
</section>

        <!-- Site title.-->


        <!-- Blog posts Carousel. -->
        <section class = "space">
            <div class = "empty"></div>
        </section>

CSS

/* Site Title */

main .site-title
    background: url(../assets/Wallpaper-2.jpg);
    background-size: cover;
    height: 110vh;
    display: flex;
    justify-content: center;


main .site-title .svg
    padding-top: 144px;
    width: 100%;



main .site-title .site-background
    padding-top: 10rem;
    text-align: center;
    color: white;
    padding-top: 24px;


html,body
    margin: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;

【参考方案1】：

如果您将 SVG 视为背景会更容易：

.site-title 
  background: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto,
    url(https://picsum.photos/id/10/800/800) center/cover;
  background-repeat:no-repeat;
  height: 90vh;
  display: flex;
  justify-content: center;


.site-title .site-background 
  padding-top: 10rem;
  text-align: center;
  color: white;
  padding-top: 24px;

<section class="site-title">
  <div class="site-background">
    <h1>Who Am I?</h1>

    <h2>I am a
      <span class="txt-type" data-wait="5000" data-words='["example", "example"]'></span>
    </h2>
  </div>
</section>

您也可以将其视为mask，您将具有透明度：

.site-title 
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto no-repeat,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
          mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto no-repeat,
    linear-gradient(#fff,#fff);
          mask-composite:exclude;
  height: 90vh;
  display: flex;
  justify-content: center;


.site-title .site-background 
  padding-top: 10rem;
  text-align: center;
  color: white;
  padding-top: 24px;


body 
  background:pink;

<section class="site-title">
  <div class="site-background">
    <h1>Who Am I?</h1>

    <h2>I am a
      <span class="txt-type" data-wait="5000" data-words='["example", "example"]'></span>
    </h2>
  </div>
</section>

【讨论】：

如果我放大或缩小网页，效果会随着曲线大小的变化而变化。有什么办法可以让它始终与背景图片对齐？

如果您现在看到编辑，第一张图片描绘了 Firefox 上 100%（正常）缩放的图像。第二张图片的缩放比例为 120%，SVG 与背景完美对齐。

@Helpthepoor123 您是否在此处复制了确切的代码？如果你在这里运行 sn-p 你有同样的问题吗？

是的，我确实复制了确切的代码。我似乎在你的 sn-p 上没有遇到同样的问题，但是，如果我也用你的背景尝试同样的事情，我会突出显示同样的问题。我真的不知道为什么缩放会影响如此糟糕。

@Helpthepoor123 如果您在 sn-p 中没有遇到问题，那么请确保您涉及更多代码或者您更改了某些内容。你能验证我的代码有什么不同吗？