Question

我正在尝试实现宽度为250且高度为32的不透明度滑块，但宽度和高度不是缩放。我可以在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控制着在视口内渲染grafic的方式。它的默认值为"xMidYMid meet"，这意味着在不扭曲widht / height比率的情况下，适合视口的最大grafic被绘制到中间。您必须覆盖它才能不均匀地缩放图像。

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

1 个答案: