SVG宽度100％不全角

Question

我有以下SVG代码：

       <div className="behaviorPatternsItem" key={item.id}>
          <div className="behaviorPatternsItemStyled">
            <svg height="25" width="100%" preserveAspectRatio="none">
              <g>
                <rect x="0" y="0" width={item.amount} height="25" fill="red"></rect>
                <text x="25" y="17" font-size="12" fill="black"></text>
              </g>
            </svg>
          </div>
        </div>

正在执行以下操作。

如您所见，底部的红色条并不是100％（就像item.amount一样）。顶部栏为10％，中间栏为90％。

这是它所包围的以及引导程序的容器和行。

.scrollableDiv {
  overflow-y: scroll; height:400px;
  min-width: 100%;
}
.behaviorPatternsItem{
  border-bottom: 1px solid #cdcdcd;
  font-size:12px;
  font-weight: bold;
  min-width: 100% !important;
}

.behaviorPatternsItemStyled{
  padding: 0;
  margin: 0;
  min-width: 100% !important;
}

我想念什么？或任何提示？

Answer 1

问题是您在以下行中向item.amount注入的内容：<rect x="0" y="0" width={item.amount} height="25" fill="red"></rect>被编译器读取为像素值而不是百分比。

我的解决方案： https://jsfiddle.net/k1cbjvj7/14/