使用SVG時高度和寬度不縮放使用SVG時高度和寬度不縮放

Question

我試圖實現寬度爲250和高度爲32的不透明度滑塊，但寬度和高度不是scaling.I可以在innerSVG中輕鬆實現，我可能會在很多地方使用它，其寬度，高度和填充顏色也各不相同，我需要使用標籤來完成此操作。你能幫我嗎？這是我的代碼：

<svg style='width:0px;height:0px'> 
      <defs> 
      <mask id='zcolorslider-mask'> 
       <linearGradient id=zcolorslider-maskgrad x1='0' y1='0' x2='1' y2='0'> 
       <stop offset='0' stop-color='#000000'> </stop> 
       <stop offset='1' stop-color='#ffffff'> </stop> 
       </linearGradient> 
       <rect width=32 height=32 fill='url(#zcolorslider-maskgrad)'></rect> 
      </mask> 
      </defs> 
      <g id='zcolorslider-opacitybar'> 
      <rect width=32 height=32 fill=blue mask=url(#zcolorslider-mask)></rect> 
      </g> 
     </svg> 

     <div class='colorslider'> 
      <svg width=100% height=100% fill=pink viewBox='0 0 32 32'> 
      <use width=100% height=100% xlink:href='#zcolorslider-opacitybar' /> 
      </svg> 
     </div> 

工作URL：colorslider

Answer 1

撰寫您.colorslider這樣的：

<div class='colorslider'> 
     <svg width="100%" height="100%" 
      viewBox="0 0 32 32" preserveAspectRatio="none"> 
     <use xlink:href='#zcolorslider-opacitybar' /> 
     </svg> 
    </div> 

小心編寫有效的HTML - 使用引號的屬性值。

preserveAspectRatio支配您的圖形在視口內呈現的方式。它的默認值爲"xMidYMid meet"，這意味着適合視口的最大圖形沒有扭曲高/寬的比率被繪製到中間。您必須重寫它以不均衡地縮放圖像。