在SVG中有相对点的路径

我试图产生的代码相同的：当我缩放#svg-container

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

所以我会得到：

enter image description here

但因为我不能创建％的路径坐标我能做的最好的是：（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>

这给了我这样的结果：

enter image description here

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

我的问题是：如何实现像第一张照片一样的行为？

我不是在寻找JavaScript的答案和打破路径。

来源

2014-11-23 Everettss

好像你想要的vector-effect风格：不结垢冲程

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

来源

2014-11-23 16:39:10

是的！有用。只需要一行代码就可以修复它：http://jsfiddle.net/2fp9tLzm/ 你现在是否支持IE11呢？ – Everettss 2014-11-23 17:07:19

IE11不支持矢量效果 – 2014-11-23 17:17:59

我很抱歉地说，我认为你只能用JavaScript来做到这一点，即使这不是你正在寻找的答案。发生的事情是，您首先生成SVG路径，然后再调整大小，以便图像变得拉伸。例如，要使用JavaScript，您可以使用（browser.width/100）* 10获得10％，并且这适用于所有尺寸的浏览器屏幕。

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

不好意思的回答你提出的问题，但除非有其他的选择，否则我认为这是你做这件事的唯一方法。

来源

2014-11-23 16:17:47

在SVG中有相对点的路径

回答

相关问题