在raphael.js中缩放填充图案
[英]Scaling a fill pattern in raphael.js
问题描述
paper=Raphael('previewBody',480,480);
paper.path({"stroke-width":1},'M0,0 L480,240 L480,480 L240,480 z')
.attr('fill','url(bg.png)'))
.scale(.5,.5,0,0);
我的问题是填充没有用svg画布缩放，因此按比例，它最终是路径缩放之前的两倍。 有没有简单的方法来缩放填充模式以及svg的其余部分？
2 个解决方案
解决方案1
7 已采纳 2009-07-08 17:14:12
需要注意的是，只使用raphael库的功能即可。
在raphael对象上应用缩放函数时，它会创建一个新的svg节点，其坐标已缩放，但不幸的是，它不会修改填充属性
无论如何，当您使用url添加属性“fill”时，库会创建一个模式。 如果它是您使用的第一个“填充”属性，则此模式称为raphael-pattern-0 ，下一个称为raphael-pattern-1等...）
知道了这一点，就可以根据SVG规范更改模式的属性
您可以使用document.getElementById("raphael-pattern-0")属性，并使用setAttribute更改其属性例如（取决于您真正想要做的事情），它可能类似于：
var pat = document.getElementById("raphael-pattern-0");
pat.setAttribute("height", pat.getAttribute("height")*0.5);
pat.setAttribute("width", pat.getAttribute("width")*0.5);
您还可以修改x ， y ， patternUnits和patternContentUnits属性。
希望它能回答你的问题。
解决方案2
3 2013-01-17 04:34:17
我不知道为什么，但我的Raphael库版本（我用的是最新版本）没有把ID作为@ThibThib描述。 这可能是因为我们现在有2013年:)
我也会发布我的解决方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Raphael Test</title>
<script type="text/javascript" src="js/libs/jquery.js"></script>
<script type="text/javascript" src="js/libs/raphael.js"></script>
</head>
<body>
<div id="raphael"></div>
<script type="text/javascript">
$(document).ready(function() {
var raphael, path, pattern;
raphael = Raphael(document.getElementById('raphael'), 500, 500);
path = raphael.circle(200, 200, 180);
path.attr('stroke', '#000000');
path.attr('stroke-width', 3);
path.attr('stroke-opacity', 1);
path.attr('fill', 'url(http://3.bp.blogspot.com/_M4WdA9j-b-g/TLMF9JJJwcI/AAAAAAAAAV4/p0Y_Wo3S3sQ/s1600/Landscape1.jpg)');
pattern = $(path.node).attr('fill');
if(pattern) {
pattern = pattern.replace('url(', '').replace(')', '');
pattern = $(pattern);
}
// Shape element documentation: http://msdn.microsoft.com/en-us/library/hh846327(v=vs.85).aspx#shape_element
// Fill element documentation: http://msdn.microsoft.com/en-us/library/bb229596(v=vs.85).aspx
setTimeout(function() {
if(Raphael.vml) { // SVG not supported (IE7 & IE8) and it doesn't work :/
var html = $(path.node).html();
html = html.replace(/rvml:/g, ''); // remove prefix
html = html.replace(/ = /g, '=');
html = html.substr(html.indexOf('/>') + 2); // remove xml element
var src = '';
$(html).each(function() {
if($(this).prop("tagName") == 'FILL') {
src = $(this).attr('src');
}
});
if(src != '') {
var html = $(path.node).html();
html = html.replace(src, src + '" size="50,50');
$(path.node).html(html);
path.attr('stroke', '#000000');
path.attr('stroke-width', 3);
path.attr('stroke-opacity', 1);
}
}
else { // SVG supported and it prints correct URL
$(pattern)[0].setAttribute('width', 50);
$(pattern)[0].setAttribute('height', 50);
$(pattern).find('image')[0].setAttribute('width', 50);
$(pattern).find('image')[0].setAttribute('height', 50);
$(pattern).find('image')[0].setAttribute('preserveAspectRatio', 'defer none meet');
}
}, 1000);
});
</script>
</body>
</html>
注意几件事：
访问VML填充图像如下所述： 如何在VML中访问Raphael填充图像
更改图像大小后，我不得不重置VML版本的笔划
由于某种原因，jQuery
.attr对我不起作用，所以我使用了setAttribute（Chrome）我设置
preserveAspectRatio以达到与VML相同的效果。 如果要查看差异，可以禁用它（ 请参阅文档 ）setTimeout用于等待加载图像，因为SVG在加载图像后设置了参数，并且它覆盖了我的大小更改
你当然可以玩不同的设置：
Raphael.js中的缩放和旋转
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.