Question

我是SVG和RAPHAEL javaScript的新手。

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

1）我必须编写路径的背景代码。要么 2）我需要提供背景图像，我应该在路径中重复。

我无法编写第一种方法。

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

正在$（“＃first_graph”）创建“r1”条形图。我想自定义条形图的背景。为此，我选择了负责图形部分并设置背景图形的路径。

脚本部分：

r1.hbarchart（0,0,650,90，[base_array_1，calc_array_1]，{colors：[“＃278bd1”，“＃052f4d”]，堆叠：true}）。hover（fin，fout）; < / p> 。

$（ “＃first_graph”）找到（ “路径：奇”）ATTR（{。填写：“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>

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

图像正在被拍摄。

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

Answer 1

以下是如何做到这一点。不知道为什么你的工作不起作用。

所以要回答你的问题 “任何人都可以帮助我创建路径的”剥离背景图像“ 。”查看 DEMO

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")'});

enter image description here

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

在raphael的定制的条形图背景

1 个答案: