javascript - 使用 SVG <use> 标签时高度和宽度不缩放

Question

我正在尝试实现宽度为:250 和高度:32 的不透明度 slider ，但宽度和高度没有缩放。我可以在 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>

工作网址: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管理您的图形在视口(viewport)内呈现的方式。它有一个默认值 "xMidYMid meet"，这意味着在不扭曲宽/高比的情况下适合视口(viewport)的最大图形被绘制到中间。您必须覆盖它才能不均匀地缩放图像。