Question

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

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

javascript相当长here is the jsfiddle

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

Answer 1

您需要拆分路径以调整三角形的位置。通过挑选第二个“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
});

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

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 updated

如果您只是修改路径，可以使用Raphael.mapPath（）函数获取三角形的调整后的x / y，如下所示：

console.log(Raphael.mapPath(triangle.attr("path"), triangle.matrix));

Answer 2

我采取了简单的方法，改变了你在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");

Voila.

Answer 3

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

在拉斐尔矢量图形中移动三角形的位置

3 个答案: