Question

我正在尝试创建一个CSS构建的“spinner”作为位于父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>

Answer 1

将此添加到#spinner

  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

根据w3 school，box-sizing指明元素应该在元素的总宽度和高度中包含填充和边框，只是为了解释一下这是做什么的。你可以在这里阅读更多相关信息：

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

foreignObject Spinner在Firefox中被剪辑

1 个答案: