Question

在我参与的一个小组项目中，我们有一个带有圆圈和小按钮的svg。按钮中应该有一个加号。为此，我们使用带有引导按钮和Plus glyphicon的foreignObject。它适用于Firefox，但在Chrome中，所有加号都处于错误的位置。这是一个小例子：JSfiddle

<!DOCTYPE html>
<html>
<head>
    <title>SVG GLYPHICON TEST</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</head>
<body>

<svg width="100%" height="100%">
    <g transform="translate(100,100)">
        <circle r="20" style="fill: rgb(141, 211, 199); stroke-width: 1.5px;"></circle>
        <text dy=".35em" text-anchor="middle" style="font-size: 10px;">Node</text>
        <foreignObject width="24" height="24" x="-12" y="21.276970964404327">
            <body>
                <button type="button" class="btn btn-xs btn-default">
                    <i class="glyphicon glyphicon-plus"></i>
                    text
                </button>
            </body>
        </foreignObject>
    </g>
</svg>

</body>
</html>

对我来说，Chrome显示this，而Firefox似乎正确地渲染它。

有解决方法吗？或者在svg中包含按钮的另一种方式，这不会导致Chrome中出现此问题？

Answer 1

只需这样做：

.glyphicon {
  position: static;
}

适用于chrome，firefox，opera 所以应该在safari中工作，但没有经过测试

Chrome：svg按钮中的Glyphicon错位

1 个答案: