Firefox中剪切了externalObject Spinner

Question

我正在嘗試創建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>

Answer 1

將此添加到您的#spinner

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

根據w3學校的說法，僅是為了解釋它的更多用途，請使用box-sizing。指定元素應在元素的總寬度和高度中包含填充和邊框。 你可以在這里讀更多關於它的內容：

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

Firefox中剪切了externalObject Spinner

問題描述

1 個解決方案

解決方案1
1 已采納 2016-09-28 13:34:21

Firefox中剪切了externalObject Spinner

問題描述

1 個解決方案

解決方案1 1 已采納 2016-09-28 13:34:21

解決方案1
1 已采納 2016-09-28 13:34:21