如何使SVG中的元素不被视框拉长？

此示例绘制两个圆圈在一个盒子的尺寸10×10如何使SVG中的元素不被视框拉长？

<svg width="10" height="10" viewbox="0 0 10 10"> 
    <circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A--> 
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
</svg>

圆A具有相同的尺寸的圆B.假设我要调整大小的SVG到100×100像这样：

<svg width="100" height="100" viewbox="0 0 10 10"> 
    <circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A--> 
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
</svg>

圆圈的大小将调整大小。如何在svg中制作特定的元素，让我们只说圈A，这样它就不会受到调整大小的影响。

来源

2017-02-16 smftr

使用两个svg元素，其中一个没有viewBox。使用CSS定位将它们放在彼此之上。 –

@RobertLongson我可以使用这个解决方案，但它需要调整我的cx和cy对象取决于svg的宽度和高度，不是吗？有更好的解决方案吗？因为我的实际代码很复杂 – smftr

我不知道你的第一句话是什么意思。 –

我做了另一个样本。我使用嵌套的svg元素来分割viewBox的效果。您可以通过使用百分比值来放置形状节点的相对位置，但是此技术对于一般路径形状无用。因为，我使用“使用”元素来分割形状定义和定位。

<svg width="100" height="100"> 
    <defs> 
     <!--shape definition--> 
     <circle r="2" fill="red" id="circleA"/> <!-- circle A--> 
    </defs> 
    <!--parcentage positioning by viewport--> 
    <use x="20%" y="20%" xlink:href="#circleA"/> 
    <svg viewBox="0 0 10 10"> 
     <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
    </svg> 
</svg>

来源

2017-02-17 01:55:40 defghi1977

谢谢你，这是我需要的 – smftr

你的意思是这样吗？

<svg width="100" height="100" viewbox="0 0 10 10"> 
    <rect x="2" y="2" width="0.001" height="0.001" 
     stroke="red" stroke-width="4" stroke-linejoin="round" 
     vector-effect="non-scaling-stroke"/> <!-- circle A--> 
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B--> 
</svg>

但我不知道每个浏览器都支持矢量效果属性。

来源

2017-02-16 21:28:48 defghi1977

是否有任何属性，例如'vector-effect =“非缩放宽度和笔划”？当svg宽度和高度发生变化时，矩形的大小会缩放。 – smftr

没有UA执行任何其他矢量效果。 –

如何使SVG中的元素不被视框拉长？

回答

相关问题