Question

我的页面上有一个SVG的代码。这是一个轨道，我有一辆车沿着路径向下滚动。

<div class="my-svg-container">
<svg viewBox="-220 -219 1250 2212.5" style="
 position: absolute;
" class="my-svg" preserveAspectRatio="xMinYMin meet"><defs>
<style>.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{stroke:#2d2d2d;stroke-width:100px;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke:#fad000;stroke-width:9px;}.cls-4{stroke-dasharray:12 11.54;}.cls-5{stroke-dasharray:12 10.64;}.cls-6{stroke-dasharray:12 12.26;}.cls-7{stroke-dasharray:12 13.27;}.cls-8{stroke-dasharray:12 12.67;}.cls-9{stroke-dasharray:12 10.99;}.cls-10{stroke-dasharray:12 12.24;}.cls-11{stroke-dasharray:12 13.42;}.cls-12{stroke-dasharray:12 12.63;}.cls-13{stroke-dasharray:12 10.47;}.cls-14{stroke-dasharray:12 11.73;}.cls-15{stroke-dasharray:12 11.95;}.cls-16{stroke-dasharray:12 12.17;}</style>
 <clipPath id="clip-path" transform="translate(4349 2519.5)"><rect class="cls-1" x="-4349" y="-2519.5" width="868.18" height="1964.5"></rect></clipPath></defs><title>Road(whole)</title>
 <g class="cls-2">

 <path id="theMotionPath" class="cls-3" d="M709.08 0.54v306s7,91-106,91h-461s-92-8-92,96v444s-6,78,64,78h606s98-10,98,90v394s5,84-84,84h-522s-90-3-90,90v290" ></path>
 <line class="cls-4" x1="709.08" y1="17.54" x2="709.08" y2="294.23"></line>

 <path class="cls-5" d="M-3640.93-2196.91c-3.89,25-21,69.87-93.68,74.09" transform="translate(4349 2519.5)"></path>
 <line class="cls-6" x1="584.81" y1="397" x2="154.21" y2="397"></line>

 <path class="cls-7" d="M-4226.14-2121.52c-25.35,3.77-67.35,19.56-72.3,82.4" transform="translate(4349 2519.5)"></path>
 <line class="cls-8" x1="50.08" y1="511.67" x2="50.08" y2="924.67"></line>

 <path class="cls-9" d="M-4298.32-1565.54c2.45,21,12.58,54.8,51.94,60.28" transform="translate(4349 2519.5)"></path>
 <line class="cls-10" x1="132.32" y1="1015" x2="707.96" y2="1015"></line>

 <path class="cls-11" d="M-3609.53-1504.15c26.79,2.72,72.47,16.34,78,77" transform="translate(4349 2519.5)"></path>
 <line class="cls-12" x1="818.08" y1="1123.63" x2="818.08" y2="1486.69"></line>

 <path class="cls-13" d="M-3532-1004.08c-3.44,22.94-17.31,62.35-71.73,67.11" transform="translate(4349 2519.5)"></path>
 <line class="cls-14" x1="716.35" y1="1583" x2="223.99" y2="1583"></line>

 <path class="cls-15" d="M-4154.73-934.92c-24.59,4.26-66.45,19.86-71.61,76.46" transform="translate(4349 2519.5)"></path>
 <line class="cls-16" x1="122.13" y1="1691.17" x2="122.13" y2="1950.92"></line>


 <path class="cls-17" d="M-4226.87-562.5
 v6m.13-296
 q-.14,2.93-.13,6
 v6
 m96-96
 h-6
 s-2.23-.07-6,.16
 m533.95-.29q-2.92.14-6,.13
 h-6
 m90-90
 v6
 s.13,2.24,0,6
 m-.09-406
 c.08,2,.12,4,.12,6
 v6
 m-104-96
 h6
 s2.22-.23,6-.27
 m-618,.07
 c1.94.13,3.93.2,6,.2h6m-70-84v6s-.18,2.26-.12,6m.22-456
 q-.11,2.94-.1,6v6m98-102h-6s-2.23-.19-6-.13m473,0q-2.94.09-6,.09
 h-6m112-97v6a57.48,57.48,0,0,1,0,6m0-312v6" transform="translate(4349 2519.5)"></path></g>


 <g class="shakyimage">
 <image speed="2" width="5%" height="5%" x="-65" y="-30" xlink:href="https://cdn3.iconfinder.com/data/icons/cars-28/512/Car_5-512.png" id="dot" ></image>

 </g>
 <g >
 <image width="45%" height="11%" x="423" y="-100" xlink:href="https://cdn0.iconfinder.com/data/icons/gpsmapicons/red/gpsmapicons07.png">
 </g>
 <g >
 <image width="30%" height="10%" x="-66" y="1782.17" xlink:href="https://cdn0.iconfinder.com/data/icons/gpsmapicons/red/gpsmapicons07.png">
 </g>
 </svg>

</div>

这个功能非常好。我的主要问题是我已经构建了与轨道对齐的页面。这意味着轨道的末端与页面的最后一部分完全对齐。问题是，当你缩小页面时，轨道的大小会缩小。

目前我尝试过这样做：

.my-svg-container{
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 38.5%; /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */

  vertical-align: middle; /* top | middle | bottom ... do what you want */
 }


 .my-svg{ /* svg into : object, img or inline */
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%; /* only required for <img /> */
 }

然而，这似乎对响应性没有影响。

那么基本上可以进行这种扩展，但保留其在页面上的位置是可能的吗？高度似乎是主要问题;定位似乎完好无损，但高度会缩小，所以一切都不再对齐。

谢谢！如果您需要更多信息，请告诉我们

Answer 1

您正在按比例缩放SVG图像，这意味着当 width 更改（以适应页面宽度）时， height 也必须更改以保留图像的比例。

在某种程度上，这就是你想要的，因为缩放图像而忽略比例会导致你的交通标志或汽车被拉伸。另一方面，你想要保持道路高度固定，所以这里有你的选择：

备选方案1 - 不缩放图像

这可能与你正在寻找的东西相悖，但绝对值得考虑。您没有缩放图像围绕其旋转的文本，那么为什么要缩放图像呢？只要保持两个中心的恒定大小。

备选方案2 - 单独扩展SVG的部分

您可以将SVG分成您想要的具有固定比例的部分（如交通标志和道路的垂直部分）和可变比例（如水平道路）。您可以使用preserveAspectRatio和viewBox属性。有example here（适用于Chrome但不适用于当前的Firefox）。

备选方案3 - 以不连续的步骤进行扩展

如果您真的希望图像在更大的显示屏上变得更大，但又不想感受替代2 的复杂性，您可以准备几个SVG以获得多个宽高比。使用媒体查询显示适当的宽度间隔。

Answer 2

尝试将SVG更改为

preserveAspectRatio="xMinYMin slice"

这应该意味着SVG与您的内容保持相同的高度，但随着页面变窄，SVG的右侧会被剪掉。

如果你想要以相同的速率剪掉两边（左边和右边），那么SVG保持居中，然后使用：

preserveAspectRatio="xMidYMin slice"

使用复杂的动画路径缩放SVG

2 个答案: