时间戳

首页 > 解决方案 > 移动屏幕中的 SVG

html - 移动屏幕中的 SVG

问题描述

我正在尝试使用<path>SVG 元素创建响应式 SVG 路径。但是，我无法让它工作。

我只想更改 (#Layer_2) 宽度以匹配屏幕尺寸。我不想更改其他图层/g 的宽度或高度。

我已经尝试为每个 g 编写 CSS，但它不起作用。

我使用的 SVG 形状是从Adob​​e Illustrator导出的。

这是SVG代码

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1440 360" style="enable-background:new 0 0 1440 360;" xml:space="preserve">
<g id="Layer_2">
    <rect id="XMLID_4_" x="174.5" y="179.4" width="1095.8" height="180.6"/>
</g>
<g id="Layer_3">
    <path id="XMLID_5_" d="M0,360c0,0,1-180.6,180.5-180.6L180,360H0z"/>
</g>
<g id="Layer_4">
    <path id="XMLID_7_" d="M1259.2,180c0,0,180.8,0.1,180.8-180v360h-180.8V180z"/>
</g>
</svg>

这是我想要的屏幕尺寸减小的参考图像，

标签： htmlcsssvgresponsive-design

解决方案

通常，纯 SVG 无法像这样拉伸 SVG 的一部分。当然，您也可以通过使用 Javascript 修改 SVG 来实现。

但是，只要您的 SVG 设计符合某些标准，就有一种方法可以做到这一点。主要标准是至少你的末端部分是实心的，并且完全覆盖了你的“有弹性”的中间部分。

在你的情况下，这是真的。你的右端部分将完全覆盖你的中间矩形。

这是一个工作示例。尝试全屏并调整窗口大小以测试拉伸效果。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 1440 360">
  <defs>
    <!-- Position the "right" end part so that its RHS is at 0.
         Then when we later position at <use x="100%", it will stick to the right end of the SVG. -->
    <path id="End_Right" d="M1259.2,180c0,0,180.8,0.1,180.8-180v360h-180.8V180z" transform="translate(-1440, 0)"/>
  </defs>

  <!-- Left end part is unchanged -->
  <path id="End_Left" d="M0,360c0,0,1-180.6,180.5-180.6L180,360H0z"/>
  <!-- Middle part modified. It starts at the same place (x=174.5), but we make its width 100%
       so that it is guaranteed to extend at least as far as the RHS of the SVG.  It will likely
       extend past the RH end of the SVG, but we won't see it because overflow is hidden. -->
  <rect id="Middle" x="174.5" y="179.4" width="100%" height="180.6"/>
  <!-- Show the right end part. It will stick to the RH side of the SVG for the reason explained above. -->
  <use xlink:href="#End_Right" x="100%" y="0"/>
</svg>

如果您不希望它在高度上放大，只是在宽度上拉伸，您需要摆脱viewBox并在其设计高度使用 SVG。在这种情况下是 360px；

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="360">
  <defs>
    <!-- Position the "right" end part so that its RHS is at 0.
         Then when we later position at <use x="100%", it will stick to the right end of the SVG. -->
    <path id="End_Right" d="M1259.2,180c0,0,180.8,0.1,180.8-180v360h-180.8V180z" transform="translate(-1440, 0)"/>
  </defs>

  <!-- Left end part is unchanged -->
  <path id="End_Left" d="M0,360c0,0,1-180.6,180.5-180.6L180,360H0z"/>
  <!-- Middle part modified. It starts at the same place (x=174.5), but we make its width 100%
       so that it is guaranteed to extend at least as far as the RHS of the SVG.  It will likely
       extend past the RH end of the SVG, but we won't see it because overflow is hidden. -->
  <rect id="Middle" x="174.5" y="179.4" width="100%" height="180.6"/>
  <!-- Show the right end part. It will stick to the RH side of the SVG for the reason explained above. -->
  <use xlink:href="#End_Right" x="100%" y="0"/>
</svg>

这是如何工作的

如果我们为这三个部分着色并使它们半透明，您可能会更好地理解正在发生的事情。中间的黄色部分一直延伸到 SVG 的末端，但右端部分覆盖了它，所以你看不出来。

#End_Left {
  fill: red;
  fill-opacity: 0.5;
}

#Middle {
  fill: gold;
  fill-opacity: 0.5;
}

#End_Right {
  fill: blue;
  fill-opacity: 0.5;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 1440 360">
  <defs>
    <!-- Position the "right" end part so that its RHS is at 0.
         Then when we later position at <use x="100%", it will stick to the right end of the SVG. -->
    <path id="End_Right" d="M1259.2,180c0,0,180.8,0.1,180.8-180v360h-180.8V180z" transform="translate(-1440, 0)"/>
  </defs>

  <!-- Left end part is unchanged -->
  <path id="End_Left" d="M0,360c0,0,1-180.6,180.5-180.6L180,360H0z"/>
  <!-- Middle part modified. It starts at the same place (x=174.5), but we make its width 100%
       so that it is guaranteed to extend at least as far as the RHS of the SVG.  It will likely
       extend past the RH end of the SVG, but we won't see it because overflow is hidden. -->
  <rect id="Middle" x="174.5" y="179.4" width="100%" height="180.6"/>
  <!-- Show the right end part. It will stick to the RH side of the SVG for the reason explained above. -->
  <use xlink:href="#End_Right" x="100%" y="0"/>
</svg>

推荐阅读