Question

我正在使用SVG作为插图，我创建了以下视图适用于所有桌面尺寸

但是当我切换到大屏幕或小屏幕时，它的位置也会改变

代码HTML

<body>
  <app-root></app-root>
  <div class="svg-container">
    <img src="./assets/Asset 1.svg" alt="" class="background">
    <img src="./assets/Asset 3.svg" alt="" class="magnifier">
    <img src="./assets/Asset 31.svg" alt="" class="pc-table">
    <img src="./assets/Asset 28.svg" alt="" class="monitor">
    <img src="./assets/Asset 32.svg" alt="" class="keyboard">
    <img src="./assets/Asset 27.svg" alt="" class="designer">
    <img src="./assets/Asset 26.svg" alt="" class = "client">
  </div>
</body>


@import '~bootstrap/dist/css/bootstrap.min.css';
body {
    overflow: hidden;
}
img{
    position: relative;
}
.background {
    position: relative;
    float: right;
    bottom:5rem;
    width: 47rem;
}
.magnifier {
    position: relative;
    float: bottom;
    top:335px;
    left:535px;
    width: 12rem;
    transform: rotate(5deg);
}
.pc-table {
    position: relative;
    float: right;
    top: 10rem;
    left: 40rem;
    width: 21rem;
}
.monitor {
    position: relative;
    float: right;
    width: 10rem;
    left: 57rem;
    bottom: 8rem;
    // top: 2rem;
}
.keyboard {
    width: 10rem;
    float: right;
    left: 33.5rem;
    bottom:11.5rem;
}
.designer {
    width: 3rem;
    float: right;
    left: 33rem;
    bottom:14.4rem;
}
.client {
    width: 10rem;
    float: right;
    left: 35rem;
    bottom:10rem;
}

我已将图像用于SVG链接，并根据CSS中的样式对其进行了样式设置，并根据我的样式对它们进行了相应的完美对齐，但是它更改了它的大小，因此显示了下图

Answer 1

以相对位置控制所有这些SVG是如此困难。我建议您使用Adobe Illustrator将它们统一在一起。

如果可以，请使用SVG作为背景图片

.svg-container{
    background-image: url('YOUR_PATH/YOUR_IMAGE.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

如何根据各种设备调整svg的大小？

1 个答案: