正在Firefox中修改foreignObject Spinner

我試圖創建一個CSS-built「spinner」作爲位於父SVG中的foreignObject。在Chrome中可以正常工作，但它正在Firefox中剪輯。正在Firefox中修改foreignObject Spinner

包括一個正在運行的示例。

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

來源

2016-09-28 Francis Hemsher

DIV（300像素+ 15px的保證金）>容器（300像素寬）似乎合法的。 – Kaiido

添加到您的#spinner

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

只是爲了解釋更多的東西，這是做了一些，根據W3學校，箱尺寸指定內容應在元素的總寬度和高度中包含填充和邊框。你可以閱讀更多關於它在這裏：

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

來源

2016-09-28 13:34:21

正在Firefox中修改foreignObject Spinner

回答

相關問題