SVG 模式的 VML 替代方案(可能使用 Raphael JS)
在 SVG 中,可以定义可用作路径填充的图案。有关我的意思的示例,您可以查看此链接:SVG 模式示例。不幸的是,SVG 在旧版本的 Internet Explorer 中不可用,因此我必须在那里使用 VML。
为了让我的生活更轻松一点,我使用 Raphaël JS(更具体地说,我使用基于 Raphaël 的 ExtJS 4.0 的绘图包),因此我不必担心 SVG 和 VML 之间的差异。
然而,Raphael JS 没有提供定义模式和使用它们的方法,所以我必须手动完成此操作。在 SVG 中这不是什么大问题,但在 VML 中我找不到创建图案并将其用作路径的(重复)背景的方法。
我发现的最接近的是能够使用图像作为路径的背景,如所述MSDN 上。问题是我想用重复的矢量图像填充路径,这样我就可以缩放它并且仍然让它看起来不错。
任何帮助我指出解决这个问题的正确方向的帮助将不胜感激。
编辑:对于访问我的帖子的人:我得出的结论是,我上面描述的内容是不可能的。 VML 中唯一可能的图案是使用 填充元素 平铺图像。由矢量形状组成的图案在 VML 中是不可能的。
In SVG it is possible to define a pattern that can be used as the fill for a path. For an example of what I mean you can check this link: SVG pattern example. Unfortunately SVG is not usable in older versions of Internet Explorer, so I'll have to work with VML there.
To make my life a little more easy I use Raphaël JS (to be more specific, I use the draw package of ExtJS 4.0, which is based on Raphaël), so I don't have to worry about the differences between SVG and VML.
Raphael JS however, does not provide a way to define patterns and use them, so I'll have to do this by hand. In SVG this is not much of a problem, but in VML I cannot find a way to create a pattern and use it as the (repeating) background of a path.
The closest thing I have found is the ability to use an image as the background of a path, as described here on MSDN. The problem is I want to fill the path with a repeating vector image, so I can scale it and still have it look nice.
Any help in pointing me in the right direction for solving this would be greatly appreciated.
Edit: For people visiting my post: I've come to the conclusion that what I describe above is not possible. The only patterning possible in VML is tiling an image, using a fill element. Patterns made of vector shapes are not possible in VML.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我正在使用这种方法:
1-使用要填充的路径的路径元素(不是矩形)创建一个边界框。
2- 将“z”和要填充的路径的路径字符串附加到边界框路径字符串。这将创建一个剪切矩形。
3-使用 javascript 在剪裁的矩形后面重复图案。
I'm using this method:
1- Create a bounding box with path element (not rect) of the path you want to fill.
2- Append "z" and the path string of the path you want to fill to the bounding box path string. This will create a clipped rect.
3- Use javascript for repeating pattern behind the clipped rect.