SVG feMorphology 标签

简介

用来侵蚀或扩张输入的图像,它在增肥或瘦身效果方面特别有用。

属性 说明
in 图像来源
operator 操作方式:dilate(加厚)、erode(变薄)
radius 操作半径,多少像素

实例

<svg width="500" height="600" viewBox="0 0 500 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="Erode3">
            <feMorphology operator="erode" in="SourceGraphic" radius="3" />
        </filter>
        <filter id="Erode6">
            <feMorphology operator="erode" in="SourceGraphic" radius="6" />
        </filter>
        <filter id="Dilate3">
            <feMorphology operator="dilate" in="SourceGraphic" radius="3" />
        </filter>
        <filter id="Dilate6">
            <feMorphology operator="dilate" in="SourceGraphic" radius="6" />
        </filter>
    </defs>
        <g font-size="75" fill="green" stroke="black" stroke-width="6" >
            <text x="50" y="90">TXTech</text>
            <text x="50" y="200" filter="url(#Erode3)" >TXTech</text>
            <text x="50" y="310" filter="url(#Erode6)" >TXTech</text>
            <text x="50" y="430" filter="url(#Dilate3)" >TXTech</text>
            <text x="50" y="550" filter="url(#Dilate6)" >TXTech</text>
        </g>
        <g font-size="16" fill="green" >
            <text x="160" y="120">字样</text>
            <text x="140" y="230">变薄3个像素</text>
            <text x="140" y="340">变薄6个像素</text>
            <text x="140" y="460" >加厚3个像素</text>
            <text x="140" y="580" >加厚6个像素</text>
        </g>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注