响应式全宽 svg 徽标

Question

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

Example of what I want to achieve

这是我的 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>

Answer 1

是的，这是可能的，但有点诡计。下面是您的 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" width="100%" height="52">
  <defs>
    <path id="middle-and-right" transform="translate(-1440 0)"
          d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
             h -3000 v 8.4 h 3000
             v19.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" />
  </defs>
  
  <use xlink:href="#middle-and-right" x="100%"/>
  <rect x="-1" y="3.1" width="10" height="46.8" fill="white"/>
  <rect x="7.8" y="3.1" width="8.5" height="46.8"/>
</svg>

如果您想更好地了解该技巧的工作原理，请查看此版本。我已经修改了 SVG 以使这个技巧更加明显。

svg {
  background-color: red;
  overflow: visible;
}

rect {
  opacity: 0.5;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
  <defs>
    <path id="middle-and-right" transform="translate(-1440 0)"
          d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
             h -3000 v 8.4 h 3000
             v19.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" />
  </defs>
  
  <use xlink:href="#middle-and-right" x="100%"/>
  <rect x="-1" y="3.1" width="10" height="46.8" fill="white"/>
  <rect x="7.8" y="3.1" width="8.5" height="46.8"/>
</svg>

但是如果您不介意左端的垂直部分被移动，因此它很难靠在 SVG 的左侧，那么我们可以删除关于背景的限制。下面的新版本适用于任何页面背景颜色。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="52">
  <defs>
    <path id="middle-and-right" transform="translate(-1440 0)"
          d="M1428.4,6.9c-2.5-2.5-6-3.7-10.5-3.7h-7.6h-9.5v19.1
             h -3000 v 8.4 h 3000
             v19.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" />
  </defs>
  
  <use xlink:href="#middle-and-right" x="100%"/>
  <rect x="0" y="3.1" width="8.5" height="46.8"/>
</svg>

Answer 2

您可以通过对 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>