支持百分比单位的 SVG 多边形点 [英] SVG polygon points with percentage units support

问题描述

我正在尝试使用可轻松调整大小的流畅 SVG 画布.到目前为止，我到处都在使用百分比.然而，SVG polygon 和 path 似乎不支持 point 属性中的百分比.举个例子:

(jsFiddle)

但是，如果我开始将 points 属性中的数字更改为百分比，它会失败并在控制台中出现解析错误.我正在寻找一种可以使用 元素调整多边形大小的方法.

解决方案

通过使用 viewBox 和容器元素(无论大小)，我认为您可以实现您正在寻找的效果:http://jsfiddle.net/davegaeddert/WpeH4/

<svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'><rect x='40%' y='40%' width='25%' height='25%'/><多边形点="0,0 0,100 30,20 30,0"/><多边形点="30,0 30,20 60,0 60,0"/><polygon points="60,0 60,0 90,30 90,0"/></svg>

如果你给 viewBox 一个 0 0 100 100 的大小，那么点可以写成百分比，形状会随着 svg 缩放.

I am trying to have a fluid SVG canvas that can resize easily. So far I'm using percentages everywhere. However it seems like SVG polygon and paths do not support percentages in point attribute. Here's an example:

(jsFiddle)

<svg width='90%' height='90%' style='background-color: whitesmoke'>
    <rect x='40%' y='40%' width='25%' height='25%' />

    <polygon points="0,0 0,100 30,20 30,0" />
    <polygon points="30,0 30,20 60,0 60,0" />
    <polygon points="60,0 60,0 90,30 90,0" />
</svg>

However if I start to change numbers in points attribute to percentages it fails with parsing error in console. I am looking for a way to have the polygon that can resize with the <svg> element.

解决方案

By using viewBox and a container element (of whatever size) I think you can achieve the effect you're looking for: http://jsfiddle.net/davegaeddert/WpeH4/

<div id="svg-container" style="width:100%;height:100%;">
    <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
        <rect x='40%' y='40%' width='25%' height='25%' />

        <polygon points="0,0 0,100 30,20 30,0" />
        <polygon points="30,0 30,20 60,0 60,0" />
        <polygon points="60,0 60,0 90,30 90,0" />
    </svg>
</div>

If you give the viewBox a size of 0 0 100 100 then the points can be written like percentages and the shape will scale with the svg.

这篇关于支持百分比单位的 SVG 多边形点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！