个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试创建一个 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/
25
4
0
在this question的回答中, this fiddle进行“正常”裁剪，即灰色区域矩形外的图像将被裁剪，只保留灰色矩形区域内的图像。 “正常”裁剪的关键代码使用函数“clipTo”: obje
我一直在使用 JPanel，在提供的代码中名为 infoPanel，我希望能够在它前面精确地放置一个带有 JLabel 的 JTextField。我尝试向其中添加 JLabel，但无法将其放置在我想要
这可能没有我想象的那么难，但是我如何选择图像的一部分呢？考虑以下示例: 灰色区域是PNG或JPG格式的图片，现在我想从中选择红色的80x80像素区域。红色区域应显示，其余区域不显示。我尝试了很多方法:
http://www.youtube.com/watch?v=gZNdfVwkttM - 如果您看不到图片，您可以看到此视频中描述的所有问题。 下面所有图像中的所有墙壁都具有半透明的 PNG 纹理。每
我已经阅读了几个小时关于剪辑的文章，但我似乎没有找到解决我的问题的方法。 这是我的场景: 在 OpenGL ES 环境(IOS、Android)中，我有一个由可绘制对象组成的 2D 场景图，形成一棵树
问题是当我使用像 Helvetica Oblique 这样大小大于 13 的斜体字体时，UIButton 剪辑标题尾部(最后大约 1-2 个像素)。有人知道这个问题的解决方案吗？ 最佳答案 子类 UI
想象一下，有一组光线围绕着一个圆圈 - 就像太阳一样。我想做的是遮盖光线，让光线看起来像是从太阳“升起”。 在 Flash 中，我可以通过执行类似以下步骤的操作为此创建一个不错的效果:- 将光线分成
我试图在背景图片上添加 CSS3 webkit 模糊，然后对其进行剪辑(通过将其放入较小的父级并设置 overflow: hidden ) 不幸的是，当我这样做时，我的模糊效果只发生在剪辑的内容上，所
如何让 div #1(页面标题)“切入”div #2(mainwrap)并查看背景图像？ 例子: CSS: body {background-image: url("/background
我有一个相当数学的问题需要解决: 任务是用最少的废料从固定长度的管中切割出预定数量的管。 假设我想从标准长度为 6m 的 pipe 中切割出 10 根 1m 的 pipe 和 20 根 2.5m 的
我有一个巨大的image嵌入在 SVG 中的 map ，它比浏览器窗口大得多并位于屏幕中心。 有两条路。一条路径勾勒出一座建筑。另一条路径勾勒出 map 上的一个子区域。
我试图理解 E. L Foster 和 J. R. Overfelt [1] 的论文“Clipping of Arbitrary Polygons with Degeneracies”，该论文声称通过
我正在从一组点计算 voronoi 图，如下所示: from scipy.spatial import Voronoi import numpy as np np.random.seed(0) poi
我整天都在尝试解决这个问题，我将 mainWindow.xib 升级到了 4 英寸 iPhone 5 版本，并且我所有的 ActionSheets 在 4 英寸模拟器上都表现正常。但是，如果我取消在
我做了一个这样的面板框: HTML Hot Article Article Article Article
有什么方法可以防止 clip-path 剪掉它的 child 吗？例如，考虑以下代码: .el { width: 300px; height: 300px; clip-path: poly
我的应用程序使用 UINavigationController，但我没有显示工具栏，因为我的所有导航都由游戏内控件控制。 我没有标签栏，因为我没有使用 TabBarController。 我的游戏应用
场景: 在我的场景中，我实现了一个顶点着色器，它在相机位置的 xz 轴上定位一个平面网格。因此，如果相机移动，平面网格也会随之移动。这导致视觉效果，即在移动相机时，平面网格似乎保持固定在原地。这似乎工
我想替换列表中的大纲。因此我定义了一个上限和下限。现在，upper_bound 和 lower_bound 之下的每个值都替换为绑定(bind)值。我的方法是使用 numpy 数组分两步执行此操作。
我想在我的 Fabric-powered Canvas 中设置一个全局 clipTo，这将影响所有用户添加的图层。我想要一个不受此剪辑蒙版影响的背景图像和叠加图像。 例子: 这是这张照片中发生的事情:
我是一名优秀的程序员,十分优秀！