0

我有两个 svg 文件，1.svg我2.svg想在 HTML 页面上排列，如下所示：

[1.svg]
[2.svg]

我想进行设置，以便这些是页面上唯一的元素，并且当您更改浏览器大小时，您会在每个 .svg 后面获得两种不同的背景颜色，它们对应于 svg。

我设置它的方式是做两个不同的div：

<div class="top_body">
    <object data="images/1.svg" class="bg_top" type="image/svg+xml"></object>
</div>
<div class="bottom_body">
    <object data="images/2.svg" class="bg_bottom" type="image/svg+xml"></object>
</div>

并将这些样式设置如下：

.bg-top {
  height:100%;
  width:100%;
  margin:0px;
}

.bg-bottom {
  width:100%;
  margin:0px;
}


.top_body {background-color:#{some color}  ;}
.bottom_body {background-color:#{some other color}  ;}

但是有两个问题：

  1. 我想确保 svg 元素居中，任何一侧都没有空格（现在左侧有空格）

  2. 我想确保元素随着浏览器窗口大小的变化而动态缩放

我确定这是调整我的css的问题，这里有任何指示吗？

4

3 回答 3

0 
.bg-top {
  height:100%;
  width:100%;
  margin:0px auto;
}

.bg-bottom {
  width:100%;
  margin:0px auto;
}


.top_body {background-color:#{some color}  ;}
.bottom_body {background-color:#{some other color}  ;}

高温高压

于 2013-08-05T03:25:25.490 回答
0

您应该能够通过以下方式实现您想要的：（a）确保您的 SVG 具有有效的“viewBox”属性（b）将 SVG 中的“width”和“height”属性设置为“100%”（c）添加或将 SVG 上的“preserveAspectRatio”属性设置为“xMidYMid slice”

<svg width="100%" height="100%" viewBox="0 0 500 500"
     preserveAspectRatio="xMidYMid slice" ...etc...>

viewBox 的实际值取决于您的 SVG 文件

于 2013-08-05T04:46:24.603 回答
0

因此，让我们将其分解为 3 个不同的标准：

1.）我想确保 svg 元素居中，任何一侧都没有空格（现在左侧有空格）

为确保 SVG 元素居中，我们需要确保为 SVG 内部的任何路径正确设置坐标，并且为 ViewBox（如果需要）配置正确的起始坐标。在下面的示例中，我有一个坐标为 0,0 到 200,100 的 SVG。其中的路径是从 0 开始到 200 的矩形，从 0 到 100。如果您的 SVG 路径没有从正确的坐标开始，则设计会添加空白。

我已经包含了 preserveAspectRatio="none" 因为这将允许 SVG 以不均匀的比例缩放。浏览器的高度和宽度可能不允许很好的缩放，这意味着空白将开始出现。这允许 SVG 以不同的比率增长。默认选项是 SVG 将在两个轴上均匀增长，如果无法在增长量较大的轴上填充空白以弥补差异。

2.) 我想确保元素随着浏览器窗口大小的变化而动态缩放

要动态缩放，对于宽度，我们可以使用 100% 宽度，并且 SVG 将始终占据其父元素的整个宽度，在本例中为 BODY 元素。

要随高度缩放，我们会遇到一些麻烦，因为 100% 的高度可能比屏幕上的要多。为了解决这个问题，我们可以使用视口高度，这样元素就只占据了屏幕不动产的 100%。为此，我们使用

高度=“100vh”

如果我们将它粘贴在两个元素上，每个元素现在都将是视口的大小，并且会在视口缩放时缩放。

3.) 当您更改浏览器大小时，您会在每个 .svg 后面获得两种不同的背景颜色

为此，我们可以使用媒体查询。我们可以设置不同的查询，当遇到这些查询时，我们可以更改 SVG 背后的样式。

要对此进行测试，您必须为示例调整浏览器的大小，以便满足每个媒体查询。

#svg1, #svg2{
  height: 100vh;
  width: 100%;
}

#svg1{
  fill: red;
}

#svg2{
  fill: blue;
}

@media (min-height: 50px) {  
  #svg1{
    fill: green;
  }

  #svg2{
    fill: yellow;
  }
}

@media (min-height: 150px) {  
  #svg1{
    fill: pink;
  }

  #svg2{
    fill: orange;
  }
}
<svg viewbox="0 0 200 100"
      id="svg1"
      preserveAspectRatio="none">
  <rect width="200" height="100" />
</svg>
<svg viewbox="0 0 200 100"
    id="svg2"
    preserveAspectRatio="none">
  <rect width="200" height="100" />
</svg>

希望这可以帮助！

于 2017-04-10T12:12:49.827 回答