2

我正在使用 Raphael.js 创建一个“播放”按钮图标。但是，三角形的位置太靠近圆的边缘。在鼠标悬停时，我正在增加笔划宽度 - 问题是三角形实际上位于圆圈之外，这根本不是我想要的。HTML 只是一个带有 id 的 div：

<html>
 <head>
 </head>
 <body>
  <div id="playB"></div>
 </body>
</html>

javascript相当长，所以这里是jsfiddle

在这种情况下，“移动”SVG 路径的最简单方法是什么？即 - 从右侧开始，从顶部开始。我尝试了各种方法，但除了更改图标的大小 - 将路径的每个数字乘以 x 之外，我根本无法操作图标。在这种情况下，移动图标的特定元素。

4

3 回答 3

2

您需要拆分路径以调整三角形的位置。通过挑选第二个“M”在路径中的位置，我能够通过肉眼做到这一点：

var playB = Raphael('playB', 200, 200);
var circle =          playB.path("M64,5.864C31.892,5.864,5.864,31.892,5.864,64c0,32.108,26.028,58.136,58.136,58.136c32.108,0,58.136-26.028,58.136-58.136C122.136,31.892,96.108,5.864,64,5.864z");
var triangle =  playB.path("M26.736,102.728L97.264,62L26.736,21.272V102.728z");

然后你可以将三角形移过来：

triangle.attr("transform", "T15,0");

要保持属性和动画完整，请将两者都添加到 Raphael 集中：

var playBP = playB.set();
playBP.push(circle, triangle);
playBP.attr({
  'stroke-width': 5,
  'stroke': "#000",
  'fill': "#fff",
  'opacity': 1
});

然后你只需要一个小改动：将鼠标悬停命令中的“this”更改为“playBP”。这似乎是多余的，但“this”指的是鼠标悬停的单个元素，而不是集合。

var speed = 5;

playBP.mouseover(function(){
  playBP.animate({
    'stroke-width': 10,
    'stroke': "#fff",
    'fill': "#000",
    'opacity': .9
  }, 1000, 'elastic');

});
playBP.mouseout(function(){
  playBP.stop().animate({
    'stroke-width': 5,
    'stroke': "#000",
    'fill': "#fff",
    'opacity': 1    
  }, speed*4, 'elastic');

});

jsFiddle 更新了

如果您只想修复路径，可以使用 Raphael.mapPath() 函数来获取三角形的调整后 x/y，如下所示：

console.log(Raphael.mapPath(triangle.attr("path"), triangle.matrix));
于 2013-01-09T19:11:34.743 回答
0

我采取了简单的方法并改变了您在inkscape中的路径。这很容易做到。如果你有兴趣，这就是我所做的。

  • 在inkscape中创建一个路径并选择它。
  • Ctrl-shift-x 启动 xml 编辑器。应该选择您的路径。
  • 单击“d”属性。
  • 在下面的框中，将值替换为小提琴中的值。
  • 点击设置。
  • 该路径将被修改为类似于您在小提琴中的路径。

然后我只是选择了三角形节点并将它们移过来。返回 xml 编辑器，选择“d”值，然后将其放入您的小提琴中。

var playBP =          playB.path("M 64,5.864 C 31.892,5.864 5.864,31.892 5.864,
64 5.864,96.108 31.892,122.136 64,122.136 96.108,122.136 122.136,96.108 122.136,
64 122.136,31.892 96.108,5.864 64,5.864 z M 38.640816,102.728 109.16882,
62 38.640816,21.272 z");

瞧。

于 2013-01-10T17:27:04.040 回答
-1

el.transform('t{x},{y}')例如，使用el.transform('t1,1')将任何元素向右和向下平移 1 个像素。您可以根据需要为 x 和 y 替换不同的值，包括负值。

于 2013-01-09T17:42:56.757 回答