SVG中具有相对点的路径答案

【问题标题】：Path with relative points in SVGSVG中具有相对点的路径
【发布时间】：2015-01-21 08:14:45
【问题描述】：

我有高度和宽度灵活的 svg。

我正在尝试生成与此等效的代码：

<div id="svg-container">
  <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: yellow'>

    <path 
      style="fill:none;stroke:blue;stroke-width:5;"
      d="M0% 10% L50% 10% L50% 90% L100% 90%"          <-here is the problem
    />

  </svg> 
</div>

所以当我扩展#svg-container 时，我会得到：

但是由于我无法使用百分比坐标创建路径，所以我能做的最好的事情是：(JSFiddle)

<div id="svg-container">
  <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: yellow'>

    <path 
      style="fill:none;stroke:blue;stroke-width:5;"
      d="M0 10 L50 10 L50 90 L100 90"               
    />

  </svg> 
</div>

这给了我这个结果：

在第二张图片上，您可以看到拉伸 stroke-width 的问题。

我的问题是：如何实现第一张图片上的行为？

我不是在寻找 JavaScript 答案和中断路径。

【问题讨论】：

标签： html css svg responsive-design

【解决方案1】：

好像你想要vector-effect: non-scaling-stroke 的风格

请注意，并非所有 UA 都实现了这一点，但 Chrome 和 Firefox 肯定会这样做。

【讨论】：

是的！有用。只需一行代码即可修复：jsfiddle.net/2fp9tLzmIE11 支持吗？
IE11 不支持矢量效果

【解决方案2】：

很抱歉，我认为您只能使用 JavaScript 来做到这一点，即使这不是您要寻找的答案。发生的情况是您首先生成 SVG 路径，然后调整其大小以使图像被拉伸。

例如，要使用 JavaScript，您可以使用 (browser.width/100)*10 来获得 10%，这应该适用于所有尺寸的浏览器屏幕。

您如何重新缩放图像（即它是 CSS @media 查询）？重新缩放后可能可以绘制路径，但我觉得这需要JS，因为您需要在浏览器加载后加载内容。

很抱歉回答您的问题，但除非有其他选择，否则我认为这是您可以做到这一点的唯一方法。

【讨论】：