我正在尝试创建一个 CSS 构建的“微调器”作为位于父 SVG 中的 foreignObject。
在 Chrome 中工作正常，但它在 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>最佳答案
将此添加到您的#spinner
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
根据 w3 学校的说法，只是为了更多地解释一下这是在做什么，box-sizing 指定元素的填充和边框应该包含在元素的总宽度和高度中。 您可以在这里阅读更多相关信息:
关于javascript - foreignObject Spinner 在 Firefox 中被剪裁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39748981/