SVG将多边形转换为矩形

时间:2017-12-22 10:52:55

标签: javascript svg

是否可以将以下多边形svg转换为矩形。内部模式也应该也被转换。此外,由于这是一个较大图案的剪切,我使用feMorphology过滤器来显示clipPath和clipPath所在的形状。

Image

XML

<svg id="SvgjsSvg1008" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs">
    <defs id="SvgjsDefs1009">
        <clipPath id="SvgjsClipPath1022">
            <polygon id="SvgjsPolygon1015" points="131,55 131,218  90,280 5,235">
            </polygon>
        </clipPath>
        <filter id="dilate_shape">
            <feMorphology operator="dilate" in="SourceGraphic" radius="5" />
        </filter>
    </defs>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
    <g transform="matrix(1,0,0,1,0,0)" clip-path="url(&quot;#SvgjsClipPath1022&quot;)">
        <g filter="url(&quot;#dilate_shape&quot;)">
            <polygon points="131,55 131,218  90,280 5,235" fill="blue" fill-opacity="0.5" clip-path="url(&quot;#SvgjsClipPath1019&quot;)"></polygon>
        </g>
        <g transform="matrix(1,0,0,1,0,0)" clip-path="url(&quot;#SvgjsClipPath1022&quot;)">
            <image xlink:href="https://www.dropbox.com/pri/get/3574%20%5BConverted%5D.svg?_subject_uid=360738345&amp;raw=1&amp;size=1280x960&amp;size_mode=3&amp;w=AADi5fkmMPJI2i6WvcO3faWWR_30_D8f5IdWsJhFarM2JA" x="-75" y="-75" width="150" height="150" transform="matrix(1,0,0,1,109,185)"></image>
        </g>
    </g>
    </svg>
</svg>

0 个答案:

没有答案