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

【问题标题】：How to size svg according to various devices?如何根据各种设备调整 svg 的大小？
【发布时间】：2019-09-23 23:06:49
【问题描述】：

我正在使用 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 中的样式设置它们的样式，并根据我的样式使用完美对齐它们，但它改变了它设计的大小它显示以下图像

【问题讨论】：

能否提供链接
@ArindamSarkar 你想要什么链接，我会尽力为你提供
这段代码实际运行的地方
实际上，我正在使用 angular 在本地机器上运行
@ArindamSarkar 我可以帮你提供更多细节

标签： html css twitter-bootstrap svg responsive-design

【解决方案1】：

控制所有具有相对位置的 SVG 非常困难。我建议您使用 Adobe Illustrator 将它们统一为一个。

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

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

【讨论】：

但是如何做响应式
您可以为 SVG 内容（g 或路径）设置动画，甚至为它们提供类。正如我所说，你不需要拥有所有这些。统一后，您仍然可以使用其内容。此外，background-size: cover; 背景会自动调整为视口的 100% 宽度。
所以需要使用媒体查询