问题标签 [svg-transforms]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

23 问题

0 投票

1 回答

101 浏览

svg - 变换元素的 SVG 阴影

我想在带有变换的元素上设置阴影。

第一条路径没有缩放，它的阴影被正确渲染。但是第二条路径在 x 和 y 方向上都缩放了 50 倍，并且没有像预期的那样显示阴影。

我应该如何设置过滤器参数，以便第二个路径与第一个路径具有相同的阴影？

2017-11-21T02:43:33.867

0 投票

1 回答

54 浏览

javascript - Firefox 中转换后的 svg 子项的奇怪渲染/事件处理

所以，我有一个 SVG 叠加层，它有一个多边形拖动手柄，用于调整可缩放图像区域周围的框的大小。在 Chrome 中，一切都在顺利运行，但在 Firefox 中，一切都以难以描述的方式分崩离析。

具体来说，在 Firefox（在 54 和 57 中测试）中，多边形和拖动手柄明显呈现在正确的位置，但指针事件无法访问。我玩过pointer-eventsCSS 规则，但这似乎不是问题（或者至少不是明显的主要问题）。

如果我增加r将拖动手柄的值或笔画宽度增加超过某个阈值，

我创建了一个代码笔演示该行为的代码笔。

在这个例子中，我增加了左上角、左中角和左下角（或它们的笔划）的大小。左上方和中部的手柄将展示悬停效果，而左下方的手柄则不会。如果我将左下角 r 提高一个档次，它将是可悬停的。其余的句柄在 FireFox 中是不可悬停的。还有一个旋转手柄，它没有其他手柄那么大，但无论如何都可以悬停。同样，一切都在 Chrome 中运行良好。

更奇怪的是，可悬停/可事件空间通常不在渲染元素的正上方。它通常略高于、低于或偏向一侧。例如，左上手柄上方的可悬停空间位于手柄左侧稍远的位置。

我最初认为这可能与 Firefox 围绕转换起源的问题有关，但经过大量修补后，我不确定它是否与此相关；尤其是对象在视觉上准确地呈现在它应该在的位置。

完全被难住了。

javascript html css svg svg-transforms

2017-12-08T22:48:26.760

0 投票

0 回答

759 浏览

css - CSS 转换不适用于 Firefox 中的 SVG

我有这个用 SVG 制作的简单沙漏动画。该动画在 Chrome 中有效，但在 Firefox 中无效。我正在css transform translate申请#upper-fill-clipand #lower-fill-clip rect。

检查元素#upper-fill-clip并#lower-fill-clip显示两个元素都没有被翻译。

css firefox svg css-transforms svg-transforms

2018-01-23T11:50:40.163

0 投票

2 回答

2366 浏览

css - 在窗口上以逆时针方向从顶部开始的 SVG 圆形文件笔划

我用填充描边颜色的圆圈创建了 SVG 图像。我无法以逆时针方向从顶部位置填充颜色。如何使用内联 CSS 逆时针方向填充（需要使用内联 CSS）。我试过小提琴，添加后它可以工作：

它适用于 Linux 浏览器，但不适用于 Windows Chrome。

如何使用内联 CSS 在 Windows Chrome 浏览器中从 SVG 圆圈的顶部位置（从 12 点钟点开始）填充颜色？

SVG 代码：

css svg svg-transforms

2018-02-01T13:20:35.280

0 投票

0 回答

101 浏览

svg - 具有高翻译值的 SVG 渲染问题

我正在使用 d3 绘制数据并希望放大。直到我达到超过 10000 的比例因子和超过 40000000 的平移。

问题是，当平移值达到 30000000 以上，比例值超过 1000 时，我的情节开始消失。所以我调查并发现了问题：平移值太高。为此，我创建了以下 SVG：

它应该有 6 个绿色条（使用平移和缩放）和 5 个蓝色条（仅使用平移）。每个主要浏览器（Chrome、Firefox、IE/Edge）都会呈现错误但不同。然而，Inkscape 和 GIMP 导入正在呈现预期的结果。有没有办法在网络浏览器中解决这个问题？

关于这个 SVG 的进一步解释（Chrome 中的观察）：我使用了从 X = 0 开始的路径，创建了一条 20 个单位的水平线并应用了不同的 x 轴变换 - 从 0 开始，每一步增加 10000000。此外，我修改了路径的起点，使其在转换后应位于 0 处。路径消失后，我进一步修改了转换以获取此问题开始的特定数字。在translate(33754000 0) 处，我发现了以 svg 结尾的绿色条，因此在低于该点的位置一定是问题开始了。

使用相同的值但删除 1000 的比例因子，我发现相同的值会产生不同的结果。进一步修改我发现translate(33554440 80)的翻译，其中栏位于屏幕的一半。

svg svg-transforms

2018-02-20T14:38:23.287

0 投票

2 回答

2129 浏览