javascript - SnapSVG : scale transform executing error-free but with no noticeable effect

标签 javascript svg snap.svg

我对 Snap 和 svg 都很陌生,正在努力变得精通。我有一个外部 SVG 文件,我将其作为片段加载,然后附加到纸质对象。然后我想缩放整个纸张对象。

执行以下代码;外部文件加载,阴影被应用,它明显地附加到纸质对象上。但是,该转换不会执行任何操作。据我所知,我已经复制了与this tutorial中看到的相同的基本效果。 。不幸的是,官方文档,至少对我来说,或多或少是无用的,因为它的简洁方法含糊不清。有人吗?

var logo
            $.ajax({
                url:"img/logo.svg",
                data: null,
                complete: function(resp) {
                    logo = Snap.parse(resp.responseText);
                    logo = logo.selectAll("g");
                    var logoPaper = Snap(app.sl.svg.splash.logo.svg).append(logo);
                    logoPaper.select("#logo-full-mask")
                             .attr({filter:logoPaper.filter(Snap.filter.shadow(0,0,5, "rgba(0,0,0,.3)"))})
                    var t = Snap.matrix().scale(1.4);
                    var trans = logoPaper.transform(t.toTransformString());
                }
            });

最佳答案

经过一番闲逛后,我自己解决了这个问题,但由于我不清楚这个答案对于像我这样的新手来说是否是显而易见的,所以我选择发布它。

我试图缩放纸张对象本身,但这不起作用(或者以某种意想不到的方式起作用,但没有用)。相反,需要缩放对象的元素;对于我的情况,最简单的事情就是创建一组所有路径并对其进行缩放,因此:

var t = Snap.matrix().scale(1.4);
logoPaper.group(logoPaper.selectAll("path")).transform(t);

关于javascript - SnapSVG : scale transform executing error-free but with no noticeable effect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25351919/

相关文章:

javascript - 无需递归生成无限深度菜单的html

javascript - 显示隐藏密码

javascript - AJAX 不返回 JSP 形式的值

google-chrome - 动画标签中的 SVG begin ="id.end"属性不起作用

javascript - 如何创建用于相机控制的操纵杆

javascript - 如何使用 Snap.svg 为路径创建图像模式?

javascript - Snap.svg 中的局部坐标与绝对坐标

javascript - 如何使十字准线远离 d3.js 的边缘?

javascript - 当响应式屏幕点击特定显示器时,如何使 SVG 图像具有特定尺寸?

javascript - Snap() 方法导致 Uncaught TypeError