缩放具有复杂动画路径的SVG
缩放具有复杂动画路径的SVG
提问于 2018-02-12 15:19:08
我的页面上有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 /> */
}然而，这似乎对反应能力没有任何影响。
那么，它是否有可能基本上达到这一比例，但保留其在页面上的位置？高度似乎是主要的问题；位置似乎完好无损，但高度缩小，所以一切不再对齐。
谢谢!如果你需要更多的信息，请告诉我
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-12 16:48:00
您正在按比例缩放SVG图像，这意味着当宽度发生变化(以适应页面宽度)时，高度也必须更改以保持图像比例。
在一定程度上，这是你想要的，因为缩放图像不顾比例会导致你的交通标志或汽车拉长。另一方面，你想要保持道路高度不变，所以这里是你的选择：
替代方案1-不要缩放图像
这看起来可能与你正在寻找的东西相反，但它绝对值得考虑。你不是在缩放图像所围绕的文本，那么为什么要缩放图像呢？只要保持两个中心的大小不变。
替代2比例的SVG部分(分别为)
您可以将SVG分成固定比例(如交通标志和道路垂直部分)和可变比例(如水平道路)。可以使用preserveAspectRatio和viewBox属性。有一个这里的例子 (在Chrome上工作，而在当前的Firefox上不起作用)。
替代方案-离散步骤中的3标度
如果您真的希望图像在更大的显示器上变得更大，但不想经历替代方案2的复杂性，您可以为几个宽度/高度比准备几个SVG，并使用媒体查询来显示合适的宽度间隔。
Stack Overflow用户
发布于 2018-02-13 04:42:43
尝试将SVG更改为
preserveAspectRatio="xMinYMin slice"这意味着SVG与内容保持相同的高度，但是当页面变窄时，SVG的右侧就会被剪短。
如果希望以相同的速度剪短双方(左和右)，那么SVG将保持为中心，然后使用：
preserveAspectRatio="xMidYMin slice"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48749675
复制相关文章
相似问题
腾讯云开发者
