移动屏幕中的 SVG

Question

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

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

我试过为每个 g 写 CSS，但它不起作用。

我使用的 SVG 形状是从 Adobe 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>

这是我想要的 reference image 屏幕尺寸减小的内容，

Answer 1

一般来说，像这样拉伸 SVG 的一部分对于纯 SVG 是不可能的。当然，您可以通过使用 Javascript.

修改 SVG 来做到这一点

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

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

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

<?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>

移动屏幕中的 SVG

SVG in Mobile Screen

html

css

svg

responsive-design