SVG <rect /> 在初始加载时不显示颜色，仅在放大或缩小 IE-11 后

Posted 2023-03-15

【中文标题】SVG <rect /> 在初始加载时不显示颜色，仅在放大或缩小 IE-11 后

【英文标题】：SVG <rect /> not displaying color on initial load, only after zoom in or out IE-11

【发布时间】：2015-11-30 19:15:26

【问题描述】：

我有一个在表内的。初始加载完成后，不显示颜色。只有在我缩小或缩小后才会出现颜色。

<table>
  <tbody>
    <tr>
      <td>

         <rect fill=this.state.props.color x=this.props.offset y=this.props.offset
          width=0 height=this.state.props.height  />
      </td>
    </tr>
  </tbody>
</table>

d3.select(React.findDOMNode(this))
  .transition()
  .ease('linear')
  .delay(300)
  .duration(1000)
  .attr("width", this.state.props.width);

我在 html 中有以下元数据：

meta http-equiv="X-UA-Compatible" content="IE=edge" />

script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8">

【问题讨论】：

发布完整的反应类

【参考方案1】：

我通过在 componentDidMount 中选择 ref 时从 IE 中删除转换并添加 attr(x, ...) 解决了这个问题。我永远无法让它与过渡一起工作。

componentDidMount: function () 
     var rectref = this.refs.rectref;
     d3.select(rectref)
         .attr("width", this.state.props.width)
         .attr("x", this.props.offset);
,

render: function() 
    return (
        <table>
          <tbody>
            <tr>
              <td>
                 <rect ref="rectref" fill=this.state.props.color x=this.props.offset y=this.props.offset
                  width=0 height=this.state.props.height  />
              </td>
            </tr>
          </tbody>
        </table>
    )