0

我是 SVG 和 RAPHAEL JavaScript 的新手。

我正在通过 RAPHAEL 创建条形图。条形图具有“剥离”背景。现在条形图正在“SVG”的“路径”中呈现。根据我的说法，要实现确切的外观和感觉有两种方法：

1）我必须编码路径的背景。或 2）我需要提供我应该在整个路径中重复的背景图像。

我无法编写第一种方法。

所以，这是我的第二种方法：

"r1" 条形图正在 $("#first_graph") 处创建。我想自定义条形图的背景。为了实现这一点，我选择了负责图形部分的路径并设置背景前脸图案。

脚本部分：

r1.hbarchart(0, 0, 650, 90, [base_array_1, calc_array_1], {colors: ["#278bd1","#052f4d"],stacked: true}).hover(fin, fout);

$("#first_graph").find("path:odd").attr({ fill:"url(#image)",

});

模式部分....在 HTML 中声明：

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>

<pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
 <image xlink:href="../images/sub_chart_blue_bg.png" width="100" height="100" preserveAspectRatio="none"></image>
        </pattern>
      </defs>
    </svg>

现在，我面临的问题（在第二种方法中）是：

图像正在分层。

我请求您通过提供任何一种方法来创建图形的剥离背景（svg 的路径）来帮助我。

4

1 回答 1

0

这是你如何做到的。不知道为什么你的不起作用。

因此，要回答您的问题“任何人都可以帮助我创建路径的“剥离背景图像”。” 看演示

var p = Raphael('notepad',500,500);
var pad = p.path("M25.221,1.417H6.11c-0.865,0-1.566,0.702-1.566,1.566v25.313c0,0.865,0.701,1.565,1.566,1.565h19.111c0.865,0,1.565-0.7,1.565-1.565V2.984C26.787,2.119,26.087,1.417,25.221,1.417zM15.666,29.299c-0.346,0-0.626-0.279-0.626-0.625s0.281-0.627,0.626-0.627c0.346,0,0.627,0.281,0.627,0.627S16.012,29.299,15.666,29.299zM24.376,26.855c0,0.174-0.142,0.312-0.313,0.312H7.27c-0.173,0-0.313-0.142-0.313-0.312V4.3c0-0.173,0.14-0.313,0.313-0.313h16.792c0.172,0,0.312,0.14,0.312,0.313L24.376,26.855L24.376,26.855z");

pad.transform("t200,200");
pad.scale(10);
pad.attr({fill:'url("http://www.zingerbug.com/Backgrounds/background_images/gray_diagonal_stripes_seamless_background_pattern.jpg")'});

在此处输入图像描述

图像被拉伸是因为它很可能很大或具有很大的分辨率。要使其接近原始图像，您需要根据路径大小调整图像大小，然后将其用作背景。我认为这应该可以解决您的问题。

于 2013-08-26T15:51:29.047 回答