我在带有<svg>标签的html中有一张SVG地图.我想附加事件,以便我可以点击它们并触发一些事件.我知道我可以在多边形元素上使用jQuery附加click事件.但是这个地图中的某些区域是使用路径制作的,当我点击路径内部而不是路径时,我想触发一些事件.
这样做的方法是什么?使用jQuery是首选.
tl; dr summary:给我资源或帮助修复下面的代码<path>,用任意矩阵转换SVG 元素的路径命令.
详细信息:
我正在编写一个库,将任意SVG形状转换为<path>元素.当transform="..."层次结构中没有元素时,我可以使用它,但现在我想将对象的局部变换烘焙到路径数据命令本身.
在处理简单的moveto/lineto命令时,这主要是工作(下面的代码).但是,我不确定转换贝塞尔手柄或arcTo参数的适当方法.
例如,我可以将这个圆角矩形转换为<path>:
<rect x="10" y="30" rx="10" ry="20" width="80" height="70" />
--> <path d=?"M20,30 L80,30 A10,20,0,0,1,90,50 L90,80 A10,20,0,0,1,80,100
L20,100 A10,20,0,0,1,10,80 L10,50 A10,20,0,0,1,20,30" />
Run Code Online (Sandbox Code Playgroud)
在没有任何圆角的情况下进行转换时,我得到了有效的结果:
<rect x="10" y="30" width="80" height="70"
transform="translate(-200,0) scale(1.5) rotate(50)" />
--> <path d=?"M10,30 L90,30 L90,100 L10,100 L10,30" />
Run Code Online (Sandbox Code Playgroud)
但是,仅转换椭圆弧命令的x/y坐标会产生有趣的结果:

虚线是实际变换后的矩形,绿色填充是我的路径.
以下是我到目前为止的代码(略微减少).我还有一个测试页面,我正在测试各种形状.请帮助我确定如何在elliptical arc给定任意变换矩阵的情况下正确转换各种其他贝塞尔曲线命令.
function flattenToPaths(el,transform,svg){
if (!svg) svg=el; while(svg && svg.tagName!='svg') svg=svg.parentNode;
var …Run Code Online (Sandbox Code Playgroud) 是否有一个很好的库,用于将SVG转换为支持字体元素的HTML画布?我已经尝试过canvg,但它不支持Font.
我想验证一个数字:value在1或2之内
validates :value, :format => { :with => /1|2/, :message => "Select number.." }
Run Code Online (Sandbox Code Playgroud)
但是,上面的代码在验证时失败了 value == 1
请确保您的解决方案允许我添加验证消息.
我知道如何按顺序放置一个数组,但在这种情况下,我只是想知道它是否有序.我想,一串字符串将是最简单的,并且在这方面的答案是值得赞赏的,但是包括基于某些任意参数检查顺序的能力的答案是最佳的.
这是一个示例数据集.名称:
[["a", 3],["b",53],["c",2]]
Run Code Online (Sandbox Code Playgroud)
元素本身是包含多个元素的数组,其中第一个是字符串.我想看看这些元素是否按字母顺序排列.
如何确定Ruby中两个Time实例之间的天数?
> earlyTime = Time.at(123)
> laterTime = Time.now
> time_difference = laterTime - earlyTime
Run Code Online (Sandbox Code Playgroud)
我想确定天数time_difference(我不担心几天的时间.上下调整很好).
请协助正确的RegEx匹配.任何2个字母后跟6个整数的任意组合.
These would be valid:
RJ123456
PY654321
DD321234
These would not
DDD12345
12DDD123
Run Code Online (Sandbox Code Playgroud) 让我们想象这样的功能:
function foo(x) {
x += '+';
return x;
}
Run Code Online (Sandbox Code Playgroud)
使用它将是:
var x, y;
x = 'Notepad';
y = foo(x);
console.log(y); // Prints 'Notepad+'.
Run Code Online (Sandbox Code Playgroud)
我正在寻找一种方法来创建可与其他功能链接的功能.
想象一下用法:
var x, y;
x = 'Notepad';
y = x.foo().foo().toUpperCase(); // Prints 'NOTEPAD++'.
console.log(y);
Run Code Online (Sandbox Code Playgroud)
我该怎么做?
我有一个5行的textarea.我想只显示一行,并且在焦点上它应显示剩余的4行.
我有一个相当简单的正则表达式,但我想使用命名正则表达式使其更清晰,然后迭代结果.
测试字符串:
testing_string = "111x222b333"
Run Code Online (Sandbox Code Playgroud)
我的正则表达式:
regexp = %r{
(?<width> [0-9]{3} ) {0}
(?<height> [0-9]{3} ) {0}
(?<depth> [0-9]+ ) {0}
\g<width>x\g<height>b\g<depth>
}x
dimensions = regexp.match(testing_string)
Run Code Online (Sandbox Code Playgroud)
这项工作就像一个魅力,但问题来自何处:
dimensions.each { |k, v| dimensions[k] = my_operation(v) }
# ERROR !
undefined method `each' for #<MatchData "111x222b333" width:"111" height:"222" depth:"333">.
Run Code Online (Sandbox Code Playgroud)
没有.each在MatchData对象中的方法,我真的不想修补它.
我该如何解决这个问题?
我不像我想的那么清楚:重点是保持名称和类似哈希的结构.