相关疑难解决方法(0)
wkhtmltopdf缺少SVG路径(渲染)
我正在使用HMTL代码中的图像,如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<svg height="291pt" version="1.1" viewBox="0 0 291 291" width="291pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css">*{stroke-linecap:butt;stroke-linejoin:round;} </style> </defs> <g id="figure_1"> <g id="patch_1"> <path d="M 0 291.4 L 291.4 291.4 L 291.4 0 L 0 0 z" style="fill:none;"></path> </g> <g id="axes_1"> <g id="line2d_1"> <path clip-path="url(#p6e64365aaf)" d="M 268.427273 145.7 L 207.063636 251.984936 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_2"> <path clip-path="url(#p6e64365aaf)" d="M 248.397453 148.307103 L 199.306544 233.335052 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path> </g> <g id="line2d_3"> <path clip-path="url(#p6e64365aaf)" d="M 207.063636 251.984936 …推荐指数
解决办法
查看次数
Safari 不尊重应用于 foreignObject 的缩放
以下是 Safari 的一个奇怪且明显有问题的行为（使用版本 11 和 12 测试）。一个<foreignObject>包含HTML，缩放时，仍显示在其原始大小，即使其本地用户空间坐标对屏幕进行缩放。HTML 内容将明显溢出 parent <svg>，即使违反明确的 CSS 规则。
这里的其他答案指出需要明确设置宽度和高度（我用百分比和绝对单位进行了测试），并且应该设置命名空间（我在<foreignObject>标签本身和单个直接子项上设置它进行了测试)，但到目前为止没有任何帮助。
奇怪的是，开发工具以其预期的缩放大小显示标记矩形（浏览器窗口中的叠加层），而报告的大小数字是未缩放的。
这是预期的设置：
svg, foreignObject {
overflow: hidden;
}
rect {
fill:yellow;
}
#content {
position: relative;
width: 100%;
height: 100%;
background: red;
border-radius: 50%;
}<svg width="200px" height="200px" viewBox="0 0 400 400">
<rect width="100%" height="100%" />
<foreignObject width="400" height="400">
<div id="content" xmlns="http://www.w3.org/1999/xhtml"></div>
</foreignObject>
</svg>Safari 截图：
使用 transform 属性（也在 parent 上<g>）而不是通过 viewBox 隐式缩放没有区别。此外，我已经使用了绝对和相对尺寸的所有组合
有谁知道如何解决这个问题？
推荐指数
解决办法
查看次数
将HTML元素渲染为PNG图像？
有没有更好的方法将呈现的HTML元素转换为可缩放且不像素化的PNG图像？
设计目标是在HTML + CSS中呈现页面(简单,允许用户将文本复制/粘贴为数据表等),但是将小部件复制/保存为图像以复制到PowerPoint等.出于其他原因,它是在RIA中做客户端非常有帮助.
这没关系,使用html2canvas将元素渲染到画布,将其转换为PNG,然后在对话框中显示它,用户可以右键单击以保存或复制到剪贴板(JSFiddle at http://jsfiddle.net/8ypxW/3/):
html2canvas($("#widget"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
}
});
唯一的挑战是图像明显模糊/像素化,特别是在Mac Retina上,并且不提供像PNG图像那样的可扩展文本.
我怀疑画布周围没有好办法,画布是基于像素的,但之前是错误的.jQuery或其他库没关系.现代浏览器也没关系.即使只是获得更好的像素分辨率也很有用
通过SVG渲染是一种绕道,但如果可以做客户端,也可以选择.此链接表明它需要服务器端:http://bl.ocks.org/mbostock/6466603
推荐指数
解决办法
查看次数