SVGを使用しているときに高さと幅がスケーリングされない<use>タグ

Question

幅と高さの不透明度スライダを実現しようとしていますが、幅と高さはスケーリングされていません。innerSVGではこれを簡単に達成できます。私は幅、高さ、塗りつぶしの色を変えて色々な場所で使っているかもしれませんが、タグを使ってこれを行う必要があります。あなたは私を助けることができます？これは私のコードです：

URL作業

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

：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"です。つまり、ウィジェット/高さ比率を歪ませずにビューポートに収まる最大のグラフィックが中間に表示されます。画像を不均等に拡大するには、それをオーバーライドする必要があります。