标签: jquery-svg

JQuery和SVG - 如何找到'g'标签

想象一下:

<svg>
    <g id="node1" class="node"></g>
    <g id="node2" class="node"></g>
</svg>
Run Code Online (Sandbox Code Playgroud)

如何找到'g'标签,我希望可以点击所有标签,而不仅仅是'node1'或'node2'.我已经尝试过类似于此,但无法使其正常工作.

$('g').click(function(){
    alert("Hellooooo");
});
Run Code Online (Sandbox Code Playgroud)

jquery svg jquery-svg

7
推荐指数
1
解决办法
2万
查看次数

如何从嵌入式svg中调用父html文档中的函数

我对svg很新,我必须用它执行任务,但我遇到了很多麻烦.

我有一个svg(例如一个地图),其中的区域由路径定义.

我的目标是触发onClick svg外部的一个函数来做一些事情(例如,通过ajax检索一些与所选区域相关的人数据,并在html页面的svg之外显示它们).

我无法做的是从svg中的元素触发svg外部定义的函数.

如果我添加svg内联,我可以这样做,但我需要使用embed标签使其与Adobe插件一起使用.有什么建议吗?提前致谢.

javascript svg jquery-svg

6
推荐指数
1
解决办法
4948
查看次数

Bootstrap Tooltip在SVG Hover上不显示

你能看一下这个LINK,让我知道为什么bootstrap工具提示没有在这个svg上显示?

这是我的代码

<div class="container">
<div class="well">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200  200" xml:space="preserve">
   <polygon  class="firststar" points="64.385,54.267 56.951,50.769 49.854,54.911 50.884,46.76 44.752,41.291 52.823,39.751 56.129,32.229 60.087,39.429 
68.262,40.249 62.639,46.239 "/>
  </svg>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)

我正在使用这个jquery函数

$('.firststar').tooltip();
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap jquery-svg

6
推荐指数
1
解决办法
5566
查看次数

填充 svg 路径背景。填充不起作用

我需要在 SVG 中创建一个对话气泡。

无法填充 svg 路径的背景。我需要为这条路径填充背景颜色。填充只是像描边一样为边框着色。

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0 M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 …
Run Code Online (Sandbox Code Playgroud)

html css svg stroke jquery-svg

6
推荐指数
2
解决办法
1万
查看次数

SVG文字的文字编辑器

我目前正在使用svg及其dom操作... SVG文本是否有所见即所得的编辑器。我已经浏览了很多,但是只能找到html文本的编辑器。如果有人可以提出建议,那将对我有很大帮助。提前致谢。

wysiwyg svg jquery-svg

5
推荐指数
1
解决办法
4178
查看次数

svg按需成像

我有javascript代码,当一个人登陆其中一个页面时,它会动态生成svg图像标签.我使用d3库来帮助制作图像.唯一的问题是d3不完全兼容IE,我想根据svg文件生成.png,jpg,gif或任何其他图像文件.有没有一种已知的方法来做到这一点?服务器端代码是基于PHP的,我们使用node.js和render.js来获取大量动态内容.

php svg node.js d3.js jquery-svg

5
推荐指数
1
解决办法
979
查看次数

如何剪掉viewBox之外的内容?

是否有一种函数或方法可以剪切视图框外部的路径而不是仅仅隐藏它?

我正在使用 svg-edit,它有一个视图框、一个画布区域。在画布之外绘制的所有内容都被隐藏。然而,当收集编辑器的输出并将其粘贴到图形编辑器(例如 Inkscape)中时,就会出现整个绘图。我希望视图框外部的绘图完全从编辑器的输出中剪切掉。因此,例如,如果我有一个半在画布之外的圆,那么编辑器的输出将是半个圆,而不是整个圆,只是隐藏了一半。

我想改变主题路径本身的几何形状,而不仅仅是将其隐藏在视图中。

我正在对 svg-edit 进行修改: http: //code.google.com/p/svg-edit/

html javascript svg jquery-svg svg-edit

5
推荐指数
1
解决办法
4823
查看次数

SVG 文本旋转

我有一个带有 textContent "Design" 的文本,它被 css 转换为围绕中心 (100,100) 旋转 90 度,所以它垂直显示。它围绕中心旋转整个坐标系,我希望元素(即“设计”)单独旋转

原位置:

在此处输入图片说明

结果:

在此处输入图片说明

预期的 :

在此处输入图片说明

SVG:

<svg>
<text x="70" y="30" width="64" height="16" fill="black" transform="rotate(90,100,100)">Design</text>
</svg>
Run Code Online (Sandbox Code Playgroud)

问题是什么 ?为什么文本元素 x 位置改变了?我怎么能在固定的 x 位置旋转文本?

我想在固定的 x 位置旋转文本?

谢谢,

湿婆

svg jquery-svg

5
推荐指数
3
解决办法
2万
查看次数

单击时将SVG元素替换为另一个元素

嗨,我正在尝试以SVG格式从inkscape图像创建一些交互式内容.我正在通过http://keith-wood.name/js/jquery.svg.js上的 svg.load加载一个SVG文件

我想在加载的svg中添加一个onclick监听器,这样我可以在单击后加载不同的SVG.我该怎么做呢?以下评论中的方法失败了.

<script type='text/javascript'>
//<![CDATA[
    function drawSwitch(svg) {
        var switchElement = svg.load('./3phase_switch.svg', {
        addTo: true,
        changeSize: true
    });
//switchElement.addEventListener("click", return function(){switchElement.setAttributeNS(null, "fill", "green");}, false);
}

$(window).load(function () {
    $(function () {
        $('#svgbasics').svg({
            onLoad: drawSwitch
        });
    });
}); //]]>
</script>           
Run Code Online (Sandbox Code Playgroud)

html javascript jquery svg jquery-svg

5
推荐指数
1
解决办法
1832
查看次数

如何更改graphviz SVG的宽度和高度

我使用 Graphviz 的输出 SVG 图形被更水平地拉伸。我如何使它更垂直地扩展?或者有没有办法增加边缘的长度?

svg graphviz jquery-svg

5
推荐指数
1
解决办法
1312
查看次数