爲什麼我的SVG的圖案圖像大於由它構成的路徑？

-1

大家好！我想我有一個問題就在這裏：爲什麼我的SVG的圖案圖像大於由它構成的路徑？

繼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>

我將不勝感激，就如何解決這個問題的任何想法。謝謝！

來源

2017-07-16 Slavick

請張貼工作[MCVE。 SVG的一半缺失，所以很難弄清楚它有什麼問題。 –

@PaulLeBeau這裏是svg [link]（https://jsfiddle.net/woyp7erL/），這裏是一個完整的頁面：[link]（https://jsfiddle.net/q0g4snoy/） – Slavick

@PaulLeBlau整個項目與所有的資源在這裏https://ufile.io/1z46k – Slavick

您的模式的定義與教程不同。你有沒有試過按照他們的建議去做？

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

來源

2017-07-17 12:19:38

是的，你是對的，你的代碼它的工作原理很好。謝謝！） – Slavick

爲什麼我的SVG的圖案圖像大於由它構成的路徑？

回答

相關問題