Html2canvas: 'SVGElement.offsetWidth' 已弃用，将于 2016 年 4 月左右在 M50 中删除
所有26条评论
正要提这个！ 有点担心本月会停止工作。
Dayjo
于 2016-04-12
是的，显然在 Opera 37 测试版不起作用。 另外，最新版本的插件显示背景和边框问题。 我有一个，他们不检查？
在演示中，背景和边框也不显示（（
alex-wdmg
于 2016-04-12
这是一个大问题，因为我们的 SVG 将不再呈现。
最大的罪魁祸首是在这个函数中：
function offsetBounds(node) {
var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};
return {
top: node.offsetTop + parent.top,
bottom: node.offsetTop + node.offsetHeight + parent.top,
right: node.offsetLeft + parent.left + node.offsetWidth,
left: node.offsetLeft + parent.left,
width: node.offsetWidth,
height: node.offsetHeight
};
}
html2canvas.js 中的lines 1887 - 1898
所有offsetTop, offsetLeft, offsetWidth, offsetHeight现在都未为 SVG 定义
推荐的解决方案是getBoundingClientRect() ，但仍然无法让它工作。
有没有人对此有解决方案？
MarcBalaban
于 2016-04-19
@MarcBalaban我还没有尝试过，但它不只是将它添加到该函数的返回值之上；
if ( node.tagName === 'SVG' ) {
return node.getBoundingClientRect();
}
@Dayjo不幸的是不是，它绝对是在正确的道路上，但是这条线
var parent = node.offsetParent ? offsetBounds(node.offsetParent) : {top: 0, left: 0};
也无法正确执行，因为 offsetParent 也已折旧：
MarcBalaban
于 2016-04-19
嗯，是的，仔细研究一下，它可能需要在这里使用 getBoundingBoxInArbitrarySpace 函数之类的东西； https://svn.apache.org/repos/asf/commons/sandbox/gsoc/2010/scxml-js/trunk/src/javascript/scxml/cgf/util/svg.js根据http://stackoverflow.com /questions/5996005/how-to-use-element-offsetparent-with-html-svg-elements#answers
不过还没有机会做任何类型的测试。
Dayjo
于 2016-04-20
有关于这个问题的消息吗？ 谢谢！
chemitaxis
于 2016-05-19
@chemitaxis - 尽管有警告，但到目前为止我对 html2canvas 的结果没有任何问题。 然而，谁知道这一变化是否/何时会在 Chrome 中真正实施
Dayjo
于 2016-06-07
看起来这现在已经停止工作 Chrome。 SVG 似乎根本没有渲染、错误地渲染，或者以错误的比例/在画布中的位置渲染。
@niklasvh - 对此有何想法？ 如果我有时间，我会很高兴地进行修复，但此刻我很紧张。
Dayjo
于 2016-06-28
但不确定我需要在哪里实现它，我在offsetBounds和getBounds函数中都尝试过，但无济于事。 X 和 Y 坐标似乎是正确的，但是宽度和高度都是错误的，不确定这是不是因为我使用 css 使 SVG 100% 的容器宽度和自动高度。 需要做一些更广泛的测试。
我在这里有一个初步分支（https://github.com/Dayjo/html2canvas/tree/issue-846），使用最新的测试版提交。 如果有人想测试，应该能够使用dist版本，或者如果您愿意，可以直接重建。 不知道效果如何/是否会奏效。
Dayjo
于 2016-06-28
@Dayjo是的，我也注意到了这一点。 SVG 完全处于错误的位置，并且几乎总是在屏幕外，因为所有的 offset*s 评估为未定义。 我也尝试使用递归 getBoundingClientRect 来解决这个问题 - 但没有运气:(我会看看你的分支。
sumigoma
于 2016-06-29
我已经解决了...如果我会在周末添加解决方案
有时间。 抱歉耽搁了……它正在 FF、Safari 和 Chrome 上运行。
最好的事物。
2016 年 6 月 29 日星期三 19:00，Yuki K [email protected]写道：
@Dayjo https://github.com/Dayjo是的，我也注意到了这一点。 SVG 是
完全在错误的位置，现在几乎总是在屏幕外
所有 offset*s 评估为未定义。 我也尝试解决
这使用递归 getBoundingClientRect - 但没有运气:(我会
看看你的分支。—
你收到这个是因为你被提到了。
直接回复本邮件，在GitHub上查看
https://github.com/niklasvh/html2canvas/issues/846#issuecomment -229420457，
或静音线程
https://github.com/notifications/unsubscribe/ABWsecUQ2l-rxisMZ4HCKu1nh-mbIMU1ks5qQqSQgaJpZM4IDr12
.
chemitaxis
于 2016-06-29
@chemitaxis 太棒了！ 期待修复。
sumigoma
于 2016-06-29
嘿@chemitaxis ，如果你有时间，你能创建一个 PR 或链接到你的叉子吗？
sumigoma
于 2016-07-07
@chemitaxis这方面有什么进展吗？ 我希望在我正在做的项目中测试代码，看看它是否解决了我所有的 SVG 问题，尤其是 IE。
atdiff
于 2016-07-21
嗨@atdiff :) 我已经使用其他库解决了这个问题......
With this, I can convert SVG to Canvas, and them, export fine...
2016-07-21 20:36 GMT+02:00 atdiff notifications@github.com:
@chemitaxis https://github.com/chemitaxis any progress on this? I'm
hoping to test the code out on a project I'm doing to see if it solves all
of my SVG problems especially with IE.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/niklasvh/html2canvas/issues/846#issuecomment-234343779,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABWseVDGMW_cSyV_ZMDkkUilXC5mK_Mrks5qX7wcgaJpZM4IDr12
.
chemitaxis
于 2016-07-22
所以@chemitaxis没有解决这个问题，只是找到了一个不再使用 html2canvas 的解决方法？
Dayjo
于 2016-07-22
是的，使用混合......但我已经完全集成了，我需要重构来集成并做一个拉取请求......但我没有时间......对不起，我会尽快上传一个例子。 最好的事物。
chemitaxis
于 2016-07-22
这几乎不是一个解决方案......没有必要像使用其他库那样解决这个问题。 SVG 只是布局不正确，应该只是计算正确位置的问题。
sumigoma
于 2016-07-22
有没有人真的找到了解决这个问题的方法？ SVG 似乎不再呈现。
Dayjo
于 2016-09-13
这不是修复，但我确实找到了一个小的解决方法。 我也无法让 SVG 在 Chrome 中正确显示，但它会在 Safari 中显示。 我所做的只是为 SVG 内联元素添加一个宽度属性。 即使宽度属性不准确，它也会像在 Chrome 和 Safari 中一样打印出来：
var deferred = $q.defer();
element.find('svg').attr('width', '100px');
html2canvas(element, {
background: '#eee',
onrendered: function(canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL('image/jpeg', 1).replace('image/jpeg', 'image/octet-stream');
a.download = fileName + '.jpg';
a.click();
deferred.resolve();
}
});
return deferred.promise;
编辑：要添加的内容不相关，但其他人在此处搜索时可能会觉得有用。 Firefox 似乎不适用于我的上述方法。 我的 SVG 有 # 符号表示十六进制颜色（例如：#ccc）。 由于这些是 URL 中的保留字符，并且 Firefox 对此很严格，因此 SVG 没有出现。 我用 rgb 值代替，现在 Firefox 可以正确显示。
jgunderson-IAS
于 2016-10-20
@jgunderson-IAS 对此表示感谢，我将尝试将其作为快速解决方法。
我希望有机会花一天的时间来研究这个错误，嗯，也许是半天，然后是我使用它的半天，但应该给我一个机会来实施一个真正的解决方案。
@niklasvh不确定您是否已经看过这个，或者您是否对如何最好地实施修复有任何建议（请参阅：https://github.com/niklasvh/html2canvas/issues/846#issuecomment-229035694 )
Dayjo
于 2016-10-21
@jgunderson-IAS 我一直在明确设置 SVG 的大小，虽然这种 hacky 方法确实意味着它们被渲染，但大小似乎不一致，我设置了高度和重量属性，但它们经常出现“压扁” '。 不幸的是，我的页面依赖于由 CSS 控制的 svg 大小并且是其容器的 100%，所以虽然这是一个垫脚石，但我想我将不得不考虑重新编码库以正确计算大小
Dayjo
于 2016-10-24
这是 svgs 如何呈现的示例，现在我正在根据父元素宽度设置 'onClone' 事件的宽度（所有 svgs 在 css 中都设置为 100% 宽度），高度似乎更混乱；
html
帆布
我正在使用;
onclone: function(doc){
var w,h;
var svgs = doc.querySelectorAll('svg');
for ( var s = 0; s < svgs.length; ++s ) {
w = svgs[s].parentElement.offsetWidth;
svgs[s].setAttribute('width', w );
}
}
看起来它真的取决于 svg 本身，它呈现出它的纵横比。 例如，第一个（叶子）svg 比其他两个压缩得更多。
Dayjo
于 2016-10-24
不幸的是，我不得不放弃使用 html2canvas 而改用服务器端解决方案（ wkhtmltoimage ），因为它无法准确呈现 svgs。 我无法使用getBoundingClientRect或getBBox等来让它工作
Dayjo
于 2016-10-24
在 1.0.0 中修复
niklasvh
于 2017-12-12
相关问题
stevencherry1
·
3评论
celik75
·
4评论
bishwapoudel
·
4评论
Loki180
·
4评论
Juliazhong
·
4评论
最有用的评论
我已经解决了...如果我会在周末添加解决方案
有时间。 抱歉耽搁了……它正在 FF、Safari 和 Chrome 上运行。
最好的事物。
2016 年 6 月 29 日星期三 19:00，Yuki K [email protected]写道：