CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
vbrin27
vbrin27

Reputation: 991

Height and width are not scaling while using SVG <use> tag

I am trying to achieve an opacity slider of width:250 and height:32, but the width and height are not scaling.I can achieve this easily in innerSVG, but as I might be using it in many places, with varied width, height and fill color as well, I need to do this using tag. Can you help me out? This is my code:

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

Working url : colorslider

Upvotes: 1

Views: 1545

Answers (1)

ccprog
ccprog

Reputation: 21821

Write your .colorslider like this:

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

Take care to write valid html - use quotes around attribute values.

preserveAspectRatio governs the way your grafic is rendered inside the viewport. It has a default value of "xMidYMid meet", which means that the largest grafic that fits into the viewport without distorting the widht/height ratio is painted into the middle. You have to override it to scale your image unevenly.

Upvotes: 4

Related Questions