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

问题描述

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

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>

但是，如果我开始将points属性中的数字更改为百分比，它将失败，并在控制台中出现解析错误.我正在寻找一种可以使用<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.

推荐答案

通过使用viewBox和一个容器元素(任何大小)，我认为您可以达到所需的效果:http://jsfiddle.net/davegaeddert/WpeH4/

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>

如果将viewBox的大小设置为0 0 100 100，则可以将点写成百分比，形状将随svg缩放.

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