HTML5 - SVG元素在Firefox和Chrome上的表现不同

Question

我的目标是在'svg'和'g'元素内的'textarea'下面对齐'div'。在Firefox上它可以工作，在Chrome上它没有。

基本上我在'g'元素处应用变换，并且该元素正确地到达我想要的位置。但是，具有“class”属性的嵌套元素的位置不正确，我的意思是：拥有一个没有子元素的'i'元素工作正常，而'span'则没有。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit; position: fixed;" version="1.1" >
	<g id="g1" transform="translate(130,30) ">
		<foreignObject x="0" y="0" width="150" height="150" overflow="visible" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
            <textarea style="background: white; color: black; border-radius:6px;border-style: solid; border-width: 3px;  width: 140px; font-size: 12px; resize: none; height: 50px">test</textarea>

            <div style="margin-top: -5px;height: 33px;">
                    <a href=""> 
                        <i class="fa fa-arrow-right"></i>
                       
                        <span  class="fa-stack" title="Insert section" >
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                </div>
		</foreignObject>
	</g>
</svg>

<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit; position: fixed;" version="1.1" >
    <g id="g1" transform="translate(130,30) ">
        <foreignObject x="0" y="0" width="150" height="150" overflow="visible" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
            <textarea style="background: white; color: black; border-radius:6px;border-style: solid; border-width: 3px;  width: 140px; font-size: 12px; resize: none; height: 50px">test</textarea>

            <div style="margin-top: -5px;height: 33px;">
                    <a href=""> 
                        <i class="fa fa-arrow-right"></i>

                        <span  class="fa-stack" title="Insert section" >
                            <i class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-arrow-right fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                </div>
        </foreignObject>
    </g>
</svg>

在两个浏览器上运行小提琴以查看我提到的问题： Fiddle

以下是图片：

Firefox： Chrome：

提前谢谢o7

EDIT1：

  

很可能是Chrome中的一个错误。您应该在他们的错误跟踪器上打开一个问题。 （当你检查元素时，bbox被绘制在正确的位置，但元素本身被完全渲染掉）;

关于Kaiido aswer，这似乎与Chrome有关，因为有多个与svg和chrome有关的实例。另一个有趣的事实是，图标是根据textarea的高度渲染的，更确切地说，如果我将200px作为textarea高度，图标将会进一步下降，并且看不见的textare就在上面。

Answer 1

尝试从代码中删除此部分。