svg形状内的背景为Png

时间：2018-12-20 11:24:53

标签： svg

我正在尝试使用svg创建标头以生成弯曲形状，例如enter image description here

我复制了从Sketch生成的SVG代码，删除了一些额外的标签并修复了图像路径

<svg viewBox="0 0 1440 638" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path d="M-4.54747351e-13,163 L1440,163 L1440,700.10075 C1259.32216,751.363088 1140.10686,781.914324 1082.35411,791.754457 C776.214966,843.915606 628.837414,646.620792 362.433874,644.205808 C184.831514,642.595818 64.0202229,656.876199 6.73310296e-11,687.046952 L-4.54747351e-13,163 Z" id="path-1"></path>
    </defs>
    <g id="Header-Copy" transform="translate(0, -163.000000)">
        <mask id="mask" fill="white"><use xlink:href="#path-1"></use></mask>
        <use id="Rectangle-Copy-2" fill="#0BE17D" transform="translate(720.000000, 481.765165) scale(-1, 1) translate(-720.000000, -481.765165) " xlink:href="#path-1"></use>
        <image style="mix-blend-mode: darken;" mask="url(#mask)" x="0" y="0" width="1462.5" height="975" xlink:href="~assets/header_bg.jpg"></image>
    </g>    
</svg>

但我最终得到了这个

enter image description here

我该如何做？

1 个答案:

答案 0 :(得分：0)

从元素transform中删除<use id="Rectangle-Copy-2">属性。

<svg viewBox="0 0 1440 638" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path d="M-4.54747351e-13,163 L1440,163 L1440,700.10075 C1259.32216,751.363088 1140.10686,781.914324 1082.35411,791.754457 C776.214966,843.915606 628.837414,646.620792 362.433874,644.205808 C184.831514,642.595818 64.0202229,656.876199 6.73310296e-11,687.046952 L-4.54747351e-13,163 Z" id="path-1"></path>
    </defs>
    <g id="Header-Copy" transform="translate(0, -163.000000)">
        <mask id="mask" fill="white"><use xlink:href="#path-1"></use></mask>
        <use id="Rectangle-Copy-2" fill="#0BE17D" xlink:href="#path-1"></use>
        <image style="mix-blend-mode: darken;" mask="url(#mask)" x="0" y="0" width="1462.5" height="975" xlink:href="~assets/header_bg.jpg"></image>
    </g>    
</svg>
相关问题
最新问题