Question

我想在我的svg中用背景图片填充一条路径，在保持图像宽高比的同时自动填充整个路径，就好像你使用css background-size：cover ，我已设法使用clipPath或从图像制作图案（也想知道哪个是最佳浏览器支持的选项），但我无法使用自动缩放功能。

如果有人会有一些提示或解决方案，我将不胜感激。

这里有一个关于我必须工作的例子。 https://jsfiddle.net/shd50cvt/

svg：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="341.722px" height="267.549px" viewBox="0 0 341.722 267.549" style="enable-background:new 0 0 341.722 267.549;"
 xml:space="preserve">

.st0{fill:#FF0000;}
.st1{fill: url(#pattern);}

Answer 1

在pattern元素中，你可以使用patternUnits =＆＃34; objectBoundingBox＆＃34;和x =＆＃34; 0＆＃34;和y =＆＃34; 0＆＃34;和宽度=＆＃34; 1＆＃34;和身高=＆＃34; 1＆＃34;自动将单个图案拼贴缩放到路径的大小。你可以使用preserveAspectRatio =＆＃34; xMidYMid slice＆＃34;在覆盖整个路径时保持瓷砖的纵横比。如果jpg大小与图像元素大小不匹配，您可能还需要在image元素上设置preserveAspectRatio。

有关模式的更多信息，请参阅SVG参考。

http://www.w3.org/TR/SVG/pservers.html#Patterns

我修改了你的例子以缩放图像以填充路径。

＆＃13;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="341.722px" height="267.549px" viewBox="0 0 341.722 267.549" style="enable-background:new 0 0 341.722 267.549;"
        xml:space="preserve">
    <pattern id="pattern" patternUnits="objectBoundingBox" preserveAspectRatio="xMidYMid slice"
            x="0" y="0" width="1" height="1" viewbox="0 0 400 300">
        <image xlink:href="https://static.pexels.com/photos/909/flowers-garden-colorful-colourful.jpg"
                x="0" y="0" width="400" height="300" preserveAspectRatio="xMidYMid slice"/>
    </pattern>
    <style type="text/css">
        .st0{fill:#FF0000;}
        .st1{fill: url(#pattern);}
    </style>
    <path class="st1" d="M199.668,52.98c-17.815,0-32.711,12.454-36.484,29.128c23.783,3.473,43.093,20.685,49.641,43.322
            c14.174-5.325,24.262-18.998,24.262-35.033C237.086,69.732,220.334,52.98,199.668,52.98z"/>
    <circle class="st0" cx="154.305" cy="142.384" r="60.927"/>
</svg>

＆＃13;

具有宽高比

1 个答案: