Chrome: Glyphicon в кнопке в svg неуместен

В групповом проекте, в котором я участвую, у нас есть svg с кругами и маленькими кнопками под ними. Кнопки должны иметь знак плюса. Для этого мы используем foreignObject с кнопкой начальной загрузки и плюсиком Plus. Он работает в Firefox, но в Chrome все плюсовые знаки находятся в неправильном положении. Вот небольшой пример: JSfiddle Chrome: Glyphicon в кнопке в svg неуместен

<!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?

источник

2016-02-24 duckduck

Просто сделать это:

.glyphicon { 
    position: static; 
}

работы в Chrome, Firefox, опера так должна работать в сафари, но не тестировалось

источник

2016-06-01 11:25:24 f7o

Chrome: Glyphicon в кнопке в svg неуместен

ответ

Смежные вопросы