0
親SVGにあるforeignObjectとしてCSSで構築された「スピナー」を作成しようとしています。 Chromeでは問題なく動作しますが、Firefoxではクリップされています。 
foreignObject SpinnerがFirefoxでクリップされる
実行中の例が含まれています。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
/*
width=height
spinner border-radius is 1/2*width
*/
#spinner {
width: 300px;height: 300px;
display: inline-block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: rotate;
-o-animation-duration: 1s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border-radius:150px;
border-bottom:15px solid blue;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-o-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
-->
</style>
<title>ForeignObject - Run a Spinner</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial' onLoad=placeSpinnerFo()>
<center>
<h4>foreignObject Spinner</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Start a 'Spinner' located at the center of the parent SVG. The Spinner and its animation is css-created
</div>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400"></svg>
</div>
<script id=myScript>
var NS="http://www.w3.org/2000/svg"
//---onload---
function placeSpinnerFo()
{
var fo=document.createElementNS(NS,"foreignObject")
var spinnerDiv=document.createElement("div")
fo.setAttribute("x","50") //---send to center of SVG (200-spinner border radius)---
fo.setAttribute("y","50") //---send to center of SVG(200-spinner border radius)---
spinnerDiv.setAttribute("id","spinner")
fo.appendChild(spinnerDiv)
mySVG.appendChild(fo)
//---required for FF---
fo.setAttribute("width",300)
fo.setAttribute("height",300)
}
</script>
</body>
</html>
のdiv（300ピクセル+ 15ピクセルのマージン）>コンテナ（300ピクセル幅）は合法的と思われます。 – Kaiido