时间戳

首页 > 解决方案 > 响应式全宽 svg 徽标

svg - 响应式全宽 svg 徽标

问题描述

所以我有这个适合整个页面的标志。无论如何，当浏览器调整大小时，我可以移动这些路径吗？这样高度保持不变？

我想要实现的示例

这是我的 svg 代码

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 1440 52" style="enable-background:new 0 0 1440 52;" xml:space="preserve">
        <path d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1H16.3V3.1H7.8v46.8h8.5V30.7h1384.5v19.1h0h9.4V30.6h7.5
            c2.3,0,4.3-0.3,6-1c1.8-0.7,3.3-1.7,4.5-2.9c1.2-1.2,2.2-2.7,2.8-4.5c0.7-1.7,1-3.6,1-5.8C1432.2,12.1,1430.9,9.4,1428.4,6.9z
             M1421.4,20.1c-1,1-2.8,1.9-5.2,2h-6v-12h6c2.3,0,4,0.6,5.2,1.8s1.7,2.7,1.7,4.4C1423.1,18.5,1421.8,19.8,1421.4,20.1z" />
        </svg>

标签： svgresponsive

解决方案

您可以通过对 svg 元素使用 preserveAspectRatio="none" 以及固定的高度和宽度：100% 来执行此类操作。这将为您提供您需要的东西，但笔画在垂直和水平上的缩放比例会有所不同。

要修复它，您需要为路径添加 vector-effect="non-scaling-stroke"。

svg{height:100px; width:100%}
<svg viewBox="0 0 100 20" preserveAspectRatio="none">
  <path stroke="black"  stroke-width="5" vector-effect="non-scaling-stroke" d="M 1,5V15M1,10H97"/>
</svg>

推荐阅读