相关疑难解决方法(0)
如何将DOM元素转换为jQuery元素？
我正在使用document.createElement()创建一个元素.现在我如何将它传递给只接受Jquery对象的函数？
$("#id")
我无法使用它,因为该元素尚未在页面中呈现.
推荐指数
解决办法
查看次数
如何使用Javascript访问SVG元素
我正在搞乱SVG,我希望我可以在Illustrator中创建SVG文件并使用Javascript访问元素.
这是SVG文件Illustrator的开始(它似乎也添加了一堆垃圾到我删除的文件的开头)
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242"
xml:space="preserve">
<path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037
c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185
L34.074,86.094z"/>
<path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074
l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741
l-19.259-39.259L92.593,8.316L68.148,32.761z"/>
<polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 214.593,100.909
194.593,52.02 227.186,49.057 246.444,92.02 238.297,140.909 216.074,172.761 197.556,188.316 179.778,169.798 164.963,174.983
163.481,197.946 156.815,197.946 134.593,159.428 94.593,151.279 "/>
<path class="monkey" id="alpha" fill="#FD00FF" d="M96.315,4.354l42.963,5.185l18.519,42.222l71.852-8.148l20.74,46.667l-5.926,52.593
l-24.444,34.074l-25.185,15.555l-14.074-19.259l-8.889,2.964l-1.481,22.222l-14.074,2.963l-25.186,22.963l-74.074,4.444
l101.481,4.444c0,0,96.297-17.777,109.63-71.852S282.24,53.983,250.389,20.65S96.315,4.354,96.315,4.354z"/>
</svg>
正如您可能看到的,每个元素都有一个ID,我希望能够使用Javascript访问单个元素,这样我就可以更改Fill属性并响应诸如click之类的事件.
HTML是基本的沼泽
<!DOCTYPE html>
<html>
<head>
<title>SVG Illustrator …推荐指数
解决办法
查看次数
NVD3图表无法计算Chrome中的图例文本长度,因为Window.getComputedStyle没有正确返回font-size
背景资料
我使用其自定义窗口小部件框架创建了NVD3图表到Eclipse-RAP的集成.图表生成为div.通过在javascript中创建链接条目来动态加载CSS.我通过创建SVG /文本元素来检查CSS是否已经加载,并检查它font-size是否正常(请参阅/sf/answers/559839731/).如果加载了CSS,我会创建图表.
问题
出于某种原因,Chrome中的图表不会始终正确呈现.通常在我的会话中第一次正确显示,但第二次呈现总是错误的.对于错误的情况,我在控制台中找到了这个:
Error: Invalid value for <g> attribute transform="translate(NaN,5)"
如果我重绘图表(例如通过更新图表数据或调整大小),则会正确呈现图例.
预期:
错误的布局:
经过一些调试后,我找到了相关的d3代码部分.NVD3使用此函数请求SVG Text元素的字体大小:
d3_selectionPrototype.style = function(name, value, priority) {
var n = arguments.length;
if (n < 3) {
if (typeof name !== "string") {
if (n < 2) value = "";
for (priority in name) this.each(d3_selection_style(priority, name[priority], value));
return this;
}
if (n < 2) return d3_window.getComputedStyle(this.node(), null).getPropertyValue(name);
priority = "";
}
return this.each(d3_selection_style(name, value, priority));
};
相关的CSS部分是这样的:
svg text {
font: …推荐指数
解决办法
查看次数
是否可以在SVG元素中附加div？
我试图在SVG中附加一个HTML div,我试图创建一个图形.我试图使用下面的代码附加它,但是当我使用Firebug检查元素时,div显示在rect元素代码中,但它没有显示在图形UI中.
我正在尝试的方法是否有问题,或者是否无法在SVG中附加div？
marker.append("rect")
.attr("width", "50px")
.attr("height", "50px")
.append("div")
.attr("id", function(d) {
return "canvas_" + d.key.split(" ").join("_");
})
.style("width", "50px").style("height", "50px");
推荐指数
解决办法
查看次数
无法通过jQuery在SVG中添加图像:<image />标签变为<img rel="nofollow noreferrer" />
我想通过jQuery在SVG中添加项目.我可以插入诸如<rect />或之类的标签,<text />但我无法插入带有标签的图像<image />.
此标记会<img />自动生成,无法在SVG中显示图像:http:
//jsfiddle.net/G4mJf/
我怎么能阻止这个？如果不可能,是否有另一种方法可以使用JavaScript/jQuery在SVG中插入图像.
推荐指数
解决办法
查看次数
是否可以直接使用jquery和Svg(没有插件)？
我正在尝试与Jquery和Svg一起工作.但我不想使用任何插件.
我现在要解决的问题是,当我尝试使用传统的追加模式将子项添加到svg文档时,该对象不会被渲染.让我们看一下我尝试做的事情:
/* Creating the svg container using pure JS */
var container = document.getElementById("svg_space");
mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
container.appendChild(mySvg);
/* Adding a child and setting attributes to the SVG container using pure JS */
Circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
Circle.setAttribute("cx", "60");
Circle.setAttribute("cy", "30");
Circle.setAttribute("r", "13");
Circle.setAttribute("class", "class1");
mySvg.appendChild(Circle); /* After this, the circle is rendered */
/* Then, I tried to use jQuery to perform the same action... */
$(mySvg).append("<circle />");
$(mySvg).find("circle").attr("cx","160");
$(mySvg).find("circle").attr("cy","70");
$(mySvg).find("circle").attr("r","30");
$(mySvg).find("circle").attr("class","class1" ); …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何在运行时添加SVG元素 - Angular
我将通过单击按钮添加SVG元素:
myApp.directive('addRectangle', function() {
return function(scope, element, attr) {
element.bind('click',function() {
scope.rectCount++;
angular.element(document.getElementsByClassName('svgMain')).append('<circle r=5 cx=200 cy=200 fill=red data-scope='+scope.rectCount +' />');
});
}
});
该元素将按照我的预期正确添加,但问题是它没有显示在相关位置!我已经检查了页面的源html,我完全确定了.这是这个问题的小提琴:jsfiddle
另外,我正在使用angular版本1.4.x.
推荐指数
解决办法
查看次数
如何将html标题(工具提示)添加到leaflet.js多边形？
我有一个传单地图,我想在我的多边形中添加一个html标题(工具提示).如果我使用普通的JQuery:
$('<title>my tooltip</title>').appendTo()
标题将添加到DOM但不可见.请参阅此处了解更多详细信息,但如果我遵循该解决方案,我将无法再使用传单功能.
我也试过了leaflet.label插件,但标签随着鼠标指针移动.我只想要悬停后不久出现在一个位置的标准浏览器标题工具提示
谢谢你的帮助
推荐指数
解决办法
查看次数
使用jquery动态地将foreignObject插入到svg中
鉴于此html + svg
<div id="svg" style="width: 300px; height: 300px">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<svg x='10' y='10' id='group'>
<rect id="rect" x='0' y='0' width='100' height='100' fill='#f0f0f0'/>
</svg>
<svg x='100' y='100' id='group2'>
<rect id="rect2" x='0' y='0' width='100' height='100' fill='#f00000'/>
<foreignobject x='0' y='0' width='100' height='100' >
<body>
<div>manual</div>
</body>
</foreignobject>
</svg>
</svg>
</div>
我想将一个foreignObject插入#group(最好使用jquery,因为它使操作更简单).我试过了(代码从头部粗略)
$("#group").append("<foreignobject x='0' y='0' width='100' height='100'><body><div>auto</div></body></foreignobject>")
无济于事,因为"身体"被剥夺了.我已经尝试了几种创造身体元素的异乎寻常的方法,并且我能做到最好 - 萤火虫不再灰化插入的foreignObject元素,但它仍然不可见.
所以要么我没有看到明显的东西,要么有一种奇怪的方式来做到这一点.
想法？
最终解决方案更新 这是我提出的最短内容
var foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject' );
var body = document.createElement( 'body' ); // you cannot create bodies with …推荐指数
解决办法
查看次数