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);

我的问题是填充没有用svg画布缩放,因此按比例,它最终是路径缩放之前的两倍.
有没有简单的方法来缩放填充模式以及svg的其余部分?

解决方法

需要注意的是,只使用raphael库的功能即可.

在raphael对象上应用缩放函数时,它会创建一个新的svg节点,其坐标已缩放,但不幸的是,它不会修改填充属性

无论如何,当您使用url添加属性“fill”时,库会创建一个模式.
如果它是您使用的第一个“填充”属性,则此模式称为raphael-pattern-0,下一个称为raphael-pattern-1,等等…)

知道了这一点,就可以根据SVG specifications改变模式的属性

您可以使用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属性.

希望它能回答你的问题.

javascript – 在raphael.js中缩放填充模式的更多相关文章

  1. Python pandas DataFrame基础运算及空值填充详解

    pandas除了可以drop含有空值的数据之外,当然也可以用来填充空值,下面这篇文章主要给大家介绍了关于Python pandas DataFrame基础运算及空值填充的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  2. python实现对excel中需要的数据的单元格填充颜色

    这篇文章主要介绍了python实现对excel中需要的数据的单元格填充颜色,文章围绕主题展开详细单元格填充介绍,具有一定的参考价值,需要的小伙伴可以参考一下

  3. Spring源码解析 Bean属性填充

    这篇文章主要介绍了Spring源码解析 Bean属性填充,文章围绕主题展开想详细的内容详情,具有一定的参考价值,需要的小伙伴可以参考一下

  4. python图像填充与裁剪/resize的实现代码

    这篇文章主要介绍了python图像填充与裁剪/resize,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. vue+elementUi实现点击地图自动填充经纬度以及地点

    这篇文章主要为大家详细介绍了vue+elementUi实现点击地图自动填充经纬度以及地点,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. python面积图之曲线图的填充

    这篇文章主要介绍了python面积图之曲线图的填充,文章围绕主题的相关资料展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助

  7. Python绘制百分比堆叠柱状图并填充图案

    这篇文章主要为大家详细介绍了Python绘制百分比堆叠柱状图并填充图案,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. 通过Ajax请求动态填充页面数据的实例

    今天小编就为大家分享一篇通过Ajax请求动态填充页面数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  9. MyBatis-Plus实现公共字段自动填充功能详解

    在开发中经常遇到多个实体类有共同的属性字段,这些字段属于公共字段,也就是很多表中都有这些字段,能不能对于这些公共字段在某个地方统一处理,来简化开发呢?MyBatis-Plus就提供了这一功能,本文就来为大家详细讲讲

  10. python matplotlib实现条形图的填充效果

    这篇文章主要为大家详细介绍了python matplotlib实现条形图的填充效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部