SVG feImage 标签

简介

外部来源取得图像数据,并提供像素数据作为输出,如果外部来源是一个SVG图像,则这个图像将被栅格化。专有属性:

属性 说明
preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配,以及是否应该相对于当前用户坐标系保留参考图像的长宽比
xlink:href 图像地址链接

实例

<svg width="1000" height="300" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="Default">
            <feImage xlink:href="https://s.tinyx.cc/images/common/avatar.png" />
        </filter>
        <filter id="Fitted" primitiveUnits="objectBoundingBox">
            <feImage xlink:href="https://s.tinyx.cc/images/common/avatar.png"
                     x="0" y="0" width="100%" height="100%"
                     preserveAspectRatio="none"/>
        </filter>
        <filter id="Shifted">
            <feImage xlink:href="https://s.tinyx.cc/images/common/avatar.png" x="230" y="5"/>
        </filter>
        <filter id="Meet" primitiveUnits="objectBoundingBox">
            <feImage xlink:href="https://s.tinyx.cc/images/common/avatar.png"
                     x="0" y="0" width="100%" height="100%"
                     preserveAspectRatio="meet"/>
        </filter>
        <filter id="MeetYMin" primitiveUnits="objectBoundingBox">
            <feImage xlink:href="https://s.tinyx.cc/images/common/avatar.png"
                     x="0" y="0" width="100%" height="100%"
                     preserveAspectRatio="xMinYMin meet"/>
        </filter>
        <filter id="MeetYMax" primitiveUnits="objectBoundingBox">
            <feImage xlink:href="https://s.tinyx.cc/images/common/avatar.png"
                     x="0" y="0" width="100%" height="100%"
                     preserveAspectRatio="xMaxYMax meet"/>
        </filter>
    </defs>
    <g>
        <rect x="50"  y="25" width="100" height="200" filter="url(#Default)"/>
        <rect x="50"  y="25" width="100" height="200" fill="none" stroke="green"/>
        <text x="80" y="250" fill="green">原图</text>
        <rect x="200" y="25" width="100" height="200" filter="url(#Shifted)"/>
        <rect x="200" y="25" width="100" height="200" fill="none" stroke="green"/>
        <text x="230" y="250" fill="green">偏移</text>
        <rect x="350" y="25" width="100" height="200" filter="url(#Fitted)"/>
        <rect x="350" y="25" width="100" height="200" fill="none" stroke="green"/>
        <text x="380" y="250" fill="green">充满</text>
        <rect x="500" y="25" width="100" height="200" filter="url(#Meet)"/>
        <rect x="500" y="25" width="100" height="200" fill="none" stroke="green"/>
        <text x="530" y="250" fill="green">适应</text>
        <rect x="630" y="25" width="100" height="200" filter="url(#MeetYMin)"/>
        <rect x="630" y="25" width="100" height="200" fill="none" stroke="green"/>
        <text x="640" y="250" fill="green">适应顶部对齐</text>
        <rect x="770" y="25" width="100" height="200" filter="url(#MeetYMax)"/>
        <rect x="770" y="25" width="100" height="200" fill="none" stroke="green"/>
        <text x="770" y="250" fill="green">适应底部对齐</text>
    </g>
</svg>

效果:

留下评论

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