Question

（发布更新到我的问题：我在发布之前就已经知道了，但是我发布了公众的信息 - 尽管这是非常模糊的东西。）

我正在为这个游戏的新滚动网站工作，这是工作页面：http://pman.mindevo.com/

我已经能够将所有背景匹配并一起滚动以获得视差效果，但现在我正在努力获得在屏幕上移动的动画（最终我将更多地使用SVG精灵实际上有角色动画），但我似乎无法使像素大小正确匹配。

到目前为止，我的最新和最佳工作解决方案是使SVG与其他背景图像的高度相同。我遇到的问题是在不同的浏览器宽度下角色的'像素'（我使用这个术语，因为它是矢量）与背景的'像素'不匹配。

有没有人有任何建议让他保持与不同浏览器宽度背景相同的像素大小？

以下是有关背景SVG（SVG开放标记）的一些信息：

这是树背景视差层之一：

<svg xmlns="http://www.w3.org/2000/svg" width="2697" height="150" viewBox="0 0 2697 150">

这是角色的（'Potatoman'）svg标题：

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="150" viewBox="0 0 10 150">

最初它仅作为<img>嵌入页面中。像这样：

<div class="section2" data-1999="height:0;" data-2000="height:100%" data-3999="height:100%" data-4000="height:0" class="skrollable skrollable-between">
  <h2> Some dialogue and potatoman animation happens in this section</h2>
    <img src="images/theMan.svg" id="theMan" data-2000="left:-100%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:100%">
</div>

使用CSS就像这样：

#theMan {
  position:absolute;
  left: 0;
  bottom:1.3em;
  height:100%;
  width:4%;
}

一旦改变宽度，我无法垂直间隔。

现在您已经阅读了这篇文章，我在做这件事时想出了如何让它发挥作用。如果有人有更好的想法，我也会接受它们。否则我会在我想出这个问题时发布我自己的答案，但是如果其他人都在使用Pixel图形并且想要做我正在做的事情，那么他们就拥有了所有的信息。

Answer 1

所以，这就是我必须改变的方式。首先，我删除了图像上的width属性（#theMan），然后让它回归到我的基本img CSS中

#theMan {
  bottom:0;
  height:100%;
  left: 0;
  position:absolute;
}
/* for reference img is set like so: */
img {width: 100%;}

然后我不得不改变我的数据属性来操纵浏览器范围和浏览器高img到这个：

  <img src="images/theMan.svg" id="theMan" data-2000="left:-50%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:50%">

由于图像最终以页面为中心，因为它的宽度变为100％，因此将整个图像仅移动50％而不是100％，现在当它缩放时，它的缩放比例与背景相同图像，因为它的尺寸相同。

如何使用SVG在此滚动网站上保持像素大小对齐不同宽度？

1 个答案: