Question

我正在使用d3库来创建一个svg图形。我遇到的问题是当我调整窗口大小时。整个图形调整大小意味着文本（图例和轴）也会调整大小，直到它不可读。我需要它在调整大小时保持相同的大小。

我一直在网上搜索，我找到了这个解决方案：

var resizeTracker;
            // Counteracts all transforms applied above an element.
            // Apply a translation to the element to have it remain at a local position
            var unscale = function (el) {        

                var svg = el.ownerSVGElement;
                var xf = el.scaleIndependentXForm; 

                if (!xf) {
                    // Keep a single transform matrix in the stack for fighting transformations
                    xf = el.scaleIndependentXForm = svg.createSVGTransform();
                    // Be sure to apply this transform after existing transforms (translate)
                    el.transform.baseVal.appendItem(xf);
                }
                var m = svg.getTransformToElement(el.parentNode);
                m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
                xf.setMatrix(m);                    
            };
            [].forEach.call($("text"), unscale);
            $(window).resize(function () {                                  
                if (resizeTracker) clearTimeout(resizeTracker);
                resizeTracker = setTimeout(function () { [].forEach.call($("text"), unscale); }, 0);
            });

并将其添加到我的代码中，但它无效。我调试了它并在代码的这一部分：

var xf = el.scaleIndependentXForm;

它总是返回相同的矩阵：1 0 0 1 0 0并且文本会像其他svg元素一样继续调整大小，而不是保持静态。

是的，有人可以帮帮我吗？提前谢谢。

Answer 1

使用SnapSVG生成的SVG也发生了同样的事情，直到我注意到example page on which this does work在使用el.ownerSVGElement.ownerSVGElement而不是{{1}之前将其“主”SVG标记包装在另一个SVG标记中}。

将我的SVG包装在'空'包装SVG中（注意样式el.ownerSVGElement）我的结果好得多！

编辑：哦，等等。 Internet Explorer仍然不高兴。 Seems the author of the solution is aware...

如何使用Javascript在SVG中绘制不可伸缩的文本？

1 个答案: