Question

大家好！我想我在这里遇到了一个问题：

在this tutorial之后，我从图像（镜像的框架）创建了一条路径，并将图像应用为svg路径的填充图案。我不明白为什么模式图像会变得更大，就像你在图片中看到的那样。以下是标记：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%"
     viewBox="0 0 1949 2220"
     preserveAspectRatio="xMidYMid slice">
    <defs>   
        <pattern id="mirror" height="100%" width="100%"
                 patternContentUnits="userSpaceOnUse"
                 viewBox="0 0 1 1"
                 preserveAspectRatio="xMidYMid slice">
            <image xlink:href="mirror.jpg"
                   preserveAspectRatio="xMidYMid slice" 
                   x="0" y="0"
                   width="1" height="1" />
        </pattern>
    </defs> 

    <path .................

和页面：

<div class="w3-container">
            <div class="w3-row">
                <div id="left_pallette" class="w3-quarter w3-border">
                </div>                
                <div id="mirror" class="w3-half">                    
                    <object id="mirror_object" type="image/svg+xml" data="mirror_frame.svg">
                        <img src="mirror_frame.svg" onerror="this.src='mirror.jpg'"/>.
                    </object>
                </div>
                <div id="right_pallette" class="w3-quarter w3-border">
                </div>                
            </div>
        </div>

我很感激有关如何解决此问题的任何想法。谢谢！

Answer 1

您的模式定义与教程不同。你试过他们建议的方式吗？

<pattern id="mirror" patternUnits="userSpaceOnUse" width="1949" height="2220">
  <image xlink:href="mirror.jpg" x="0" y="0" width="1949" height="2220" />
</pattern>

为什么SVG的图案图像大于它的路径？

1 个答案: