2017-07-03 83 views
-1

我有一個.svg文件,其中顯示所有圖標。 我試圖通過在鉻中檢查來提取圖標。但是當我使用.svg代碼時,圖標顯示非常大。無法弄清楚。 任何幫助將不勝感激。我想從svg文件中提取不同的圖標

<?xml version="1.0" encoding="UTF-8"?> 
    <svg width="3693px" height="6570px" viewBox="0 0 3693 6570" 
     version="1.1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <g></g> 
     <g></g> 
     . 
     . 
     . 
     <g xmlns="http://www.w3.org/2000/svg" id="Page-1" 
      transform="translate(792.000000, 1270.000000)"> 
     <path 
      d="M114.76328,77.3289486 L164.333813,33.7049757 L164.333813,120.950732 L114.76328,77.3289486 Z M64.8402696,82.9792459 L86.5875957,102.115678 L108.334922,82.9792459 L157.36727,126.125976 L15.8181174,126.125976 L64.8402696,82.9792459 Z M58.4119109,77.3289486 L8.84137826,120.950732 L8.84137826,33.7049757 L58.4119109,77.3289486 Z M86.5875957,90.8128946 L15.8603565,28.5698676 L157.32503,28.5698676 L86.5875957,90.8128946 Z M0.364421739,134.622949 L172.821693,134.622949 L172.821693,20.0750838 L0.364421739,20.0750838 L0.364421739,134.622949 Z" 
      id="Fill-1" fill="#01D78F" /> 
     <g id="Group-7" transform="translate(0.000000, 0.717324)"> 
     <path 
      d="M114.76328,76.6116243 L164.333813,32.9876514 L164.333813,120.233408 L114.76328,76.6116243 Z M64.8402696,82.2619216 L86.5875957,101.398354 L108.334922,82.2619216 L157.36727,125.408651 L15.8181174,125.408651 L64.8402696,82.2619216 Z M58.4119109,76.6116243 L8.84137826,120.233408 L8.84137826,32.9876514 L58.4119109,76.6116243 Z M86.5875957,90.0955703 L15.8603565,27.8525432 L157.32503,27.8525432 L86.5875957,90.0955703 Z M0.364421739,133.905624 L172.821693,133.905624 L172.821693,19.3577595 L0.364421739,19.3577595 L0.364421739,133.905624 Z" 
      id="Stroke-2" stroke="#FFFFFF" stroke-width="3" /> 
     <g id="Group-6" transform="translate(136.913043, 0.000000)"> 
     <mask id="mask-12" fill="white"> 
     <use xmlns:xlink="http://www.w3.org/1999/xlink" 
      xlink:href="#path-11" /> 
     </mask> 
     <g id="Clip-5" /> 
     <path 
      d="M63.909188,31.8700703 C63.909188,49.4645838 49.6746011,63.7278811 32.1155033,63.7278811 C14.5556772,63.7278811 0.321818478,49.4645838 0.321818478,31.8700703 C0.321818478,14.2755568 14.5556772,0.0122594595 32.1155033,0.0122594595 C49.6746011,0.0122594595 63.909188,14.2755568 63.909188,31.8700703" 
      id="Fill-4" fill="#28B280" mask="url(#mask-12)" /> 
        </g> 
       </g> 
       <text id="9" font-family="Helvetica" font-size="48.9436" 
      font-weight="normal" fill="#FFFFFF"> 
        <tspan x="157.116479" y="48.9249811">9</tspan> 
       </text> 
      </g> 
     . 
     . 
     </svg> 
+0

請提供您正在使用的代碼的[最小,完整和可驗證示例](https://stackoverflow.com/help/mcve)。你打算如何使用圖像精靈? –

+0

@FredGandt我也添加了代碼。現在我想在一個單獨的.svg文件中提取所有圖標。 – user1675595

+0

您是否正在嘗試創建一些單獨的'.svg's以供使用,或僅使用上述'.svg'的部分內容? *即*將圖標*動態提取* [這個CSS技巧文章](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)有幫助嗎? –

回答

1

你的SVG的寬度和高度都非常大:

width="3693px" height="6570px" 

如果你想在SVG擴展到其容器的大小,無論他們兩個改變"100%"或刪除那些完全屬性(相當於)。