- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图将 Raphael.js 生成的 svg 转换为 PNG 图像。好吧,当 svg 没有图案和图像组件时,我将 svg 转换为图像。然后,当我将这两个组件添加到 SVG 中时,会出现问题并且转换失败。完整的 fiddle 是 here 。即使我保存生成的 svg 并在浏览器中打开而不转换为图像,图像和图案也不会呈现。
代码片段是:
var r = Raphael(document.getElementById("cus"), 390, 253);
r.setViewBox(-5, -2, 228, 306);
for (var outline in doorMatOutline) {
var path = r.path(doorMatOutline[outline].path);
//path.attr({fill: 'url('+patternuri+')'}); //adding pattern
}
//adding image
var img = r.image(imageuri, 5 ,10 ,100 ,100);
var svg = $('#cus').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
canvg('cvs', svg, {
ignoreMouse: true,
ignoreAnimation: true
});
var canvas = document.getElementById('cvs');
var img = canvas.toDataURL("image/png");
$("#resImg").attr('src', img);
$("#cus").hide();
最佳答案
我已经在这里解决了这个问题http://jsfiddle.net/fktGL/1/ ,首先我必须更改 svg 属性
xmlns="http://www.w3.org/2000/svg"
至
xmlns:xlink="http://www.w3.org/1999/xlink"
因为 svg 未在 W3C 验证服务上进行验证,并且 here是一个 stackoverflow,解释需要进行更改。
然后我必须添加一些超时以允许 SVG 正确渲染。我理解这是因为图像已在 SVG 和 Canvas 中绘制,但两者都需要一些时间来渲染图像。我的解决方案在较慢的设备上不能完美工作(增加超时会有所帮助),但我不知道另一种方法来解决这个问题(欢迎任何评论/改进)。
这是最后的片段
var r = Raphael(document.getElementById("cus"), 390, 253);
r.setViewBox(-5, -2, 228, 306);
for (var outline in doorMatOutline) {
var path = r.path(doorMatOutline[outline].path);
path.attr({
fill: 'url(' + patternuri + ')'
});
}
$('#cus svg').removeAttr('xmlns');
// If not IE
if(/*@cc_on!@*/false){
$('#cus svg').attr('xmlns:xlink',"http://www.w3.org/1999/xlink");
}
// First timeout needed to render svg (I think)
setTimeout(function(){
var svg = $('#cus').html();
window.svg = svg;
canvg(document.getElementById('cvs'), svg);
// annother delay required after canvg
setTimeout(function(){
var canvas = document.getElementById('cvs'),
img = canvas.toDataURL("image/png");
$("#resImg").attr('src', img);
//$("#cus").hide();
console.log("ending... ");
},100)
},100);
关于jquery - 具有图案和图像元素的 SVG 转换为 PNG 图像失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16580425/
我正在使用自定义的 uitableviewcell,并尝试重新创建一张活页纸作为背景。由于每个单元格都会根据文本量而增长,因此我需要为每个单元格的背景使用一个图案。但我对这些黑线有疑问,这让我发疯!
我已经解决这个问题 2 个小时了,似乎无法弄清楚如何按模式计数。 图案: 1-1-1 1-1-2 1-2-1 1-2-2 2-1-1 2-1-2 2-2-1 2-2-2 等等…… 最佳答案 我认为最简
我想尝试创建一个学习象棋应用程序作为学校项目。我的第一个计划是简单地让这个人工智能与自己进行较量,但要真正展示它是否成功,它需要能够展示它的进展情况。为了做到这一点,我希望它能够在 chess.com
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎偏离主题,因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或 include a mini
以下函数返回什么? (就意义而言) int f(int n){ if(n == 0) return 0; else return n % 2 + f(n / 2) } 尝试运行代码,但
我有一个专栏A3:A71我希望填充值 =COUNTIF(B3:B71,B3) 第二个参数随每个单元格递增。 显然我不想每次都复制这个函数,所以我希望填充句柄能帮助我。然而,尽管它正确地增加了 COUN
我需要重复 svg 在水平方向 . 我的意思是,svg 比图案大,所以我需要它在剩下的任何空间上水平重复。 我希望主要图案出现在中心,这正是现在正在发生的事情。我只需要让它在两边都重复。 现在,我只
我需要重复 svg 在水平方向 . 我的意思是,svg 比图案大,所以我需要它在剩下的任何空间上水平重复。 我希望主要图案出现在中心,这正是现在正在发生的事情。我只需要让它在两边都重复。 现在,我只
请帮我完成作业。我想使用循环 C 语言生成这样的模式 X X X XXX XXXXX XXX X X X XXXXX X X X X X X XXXXX X XX X X X X X
c# 3.0 为我们提供了带有编译器生成的支持字段的 getter 和 setter - 这真的很棒,但很多时候您仍然需要使用支持字段。 在一个完美的世界(意见)中,你可以做类似的事情 class M
我正在创建一个 wordpress 主题,我正在尝试创建一个导航栏,其中每个 li 都有不同的背景颜色(例如,红色,然后是绿色,然后是蓝色)。然后在使用前三种颜色后,它会再次重复使用。 例如:
是否可以将 .svg 图案作为背景图像,svg 图案应调整为窗口宽度和高度。 最佳答案 这是可能的,但浏览器支持有限。 Webkit 往往具有最好的 SVG 支持,而 IE 最差。您可以使用 CSS
如何打印反Z图案? 普通 Z 模式的代码: int main() { int n; printf("Enter number of rows: "); scanf("%d", &n); for (in
我的图片中有重复的图案。我想根据相似的模式找到相似的图像。 图案由十字形、三角形、正方形组成,它们组合在一起形成由这些“原始形状”构成的更复杂的结构。例如,想象一个由三角形或六边形等组成的十字架。 这
是否可以在 SVG 填充中模拟以下 CSS? background-image: url(/* URL */); background-position: 50%; background-size:
这个问题在这里已经有了答案: How to make SVG image pattern fill move with object? (4 个答案) 关闭 1 年前。 我创建了这里看到的 svg
问题:存在关联键的表列表。有必要为每个表实现 CRUD + 一些关于表细节的功能(分页等)。麻烦:在每个表的每个功能实现中重复了大约 50% 的代码。问题:关于语言细节、优化/重构/使用类似代码模式的
尝试绘制在 x 轴上重复的背景。然而,图像放错了位置,当我调整窗口大小时,位于图案中的 View 将开始“移动”。 我做错了什么?目前正在做以下工作: [[NSColor colorWithPatte
Javascript 问题。 关于模式或表达,可能是重复的问题。 您可以使用下面的三个来获得一个对象。结果对象的工作原理相同。 当您使用繁重的 JavaScript Web 应用程序时,哪种模式最好?
是否可以使用 CSS 创建以下效果。我在 HTML 中只有一个 H2 元素,我对页面的 HTML 没有任何控制。我只能更改 CSS。 我用 :before 和 :after 尝试过,但到目前为止没有成
我是一名优秀的程序员,十分优秀!