我正在尝试创建一个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>I'm attempting to create a CSS-built 'spinner' as a foreignObject located in a parent SVG. Works OK in Chrome, but it is being clipped in Firefox.
Included is a running example.
<!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 school,box-sizing指定元素应该在元素的总宽度和高度中包含填充和边框。 你可以在这里读更多关于它的内容:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
add this to your #spinner
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;Just to explain a bit more of what this is doing, according to w3 school, box-sizing Specify that elements should have padding and border included in the element's total width and height. You can read more about it here:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
更多推荐
发布评论