我有一段JavaScript代码创建(使用D3.js)svg
包含图表的元素.我想基于来自使用AJAX的Web服务的新数据更新图表,问题是每次我点击更新按钮时,它都会生成一个新的svg
,所以我想删除旧的或更新其内容.
这是JavaScript函数的一个片段,我在其中创建svg
:
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
Run Code Online (Sandbox Code Playgroud)
如何删除旧svg
元素或至少替换其内容?
目前正在构建基于浏览器的SVG应用程序.在这个应用程序中,用户可以设置和定位各种形状,包括矩形.
当我将一个stroke-width
SVG rect
元素应用于某个SVG 元素时1px
,rect
不同浏览器会以不同的方式将笔划应用于偏移和插入.这被证明是麻烦的,特别是当我尝试计算矩形的外部宽度和视觉位置并将其放置在其他元素旁边时.
例如:
到目前为止,我唯一的解决方案是自己绘制实际边界(可能使用path
工具)并将边框定位在描边元素后面.但是这个解决方案是一个令人不快的解决方案,如果可能的话,我宁愿不走这条路.
所以我的问题是,你能控制如何stroke-width
在元素上绘制SVG 吗?
我想在一些选定的元素之前放置一些SVG图像.我正在使用JQuery,但这是无关紧要的.我想将:before元素作为:
#mydiv:before {
content:"<svg.. code here</svg>";
display:block;
width:22px;
height:10px;
margin:10px 5px 0 10px;
}
Run Code Online (Sandbox Code Playgroud)
如果我如上所示,它只显示字符串.我检查了规格,似乎对内容有什么限制.是否有解决此限制的工作?只有内容css与我的问题相关.
在互联网上看到的大约一半的svg例子中,代码都包含在简单的<svg></svg>
标签中.
另一半,svg标签有很多复杂的属性,如下所示:
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
Run Code Online (Sandbox Code Playgroud)
我的问题是:使用简单的svg标签是否可以?我试过玩复杂的,如果我不包括它们,一切都很好.
我正在玩SVG并且在定位方面遇到了一些问题.我有一系列形状,包含在g
组标签中.我希望像容器一样使用它,所以我可以设置它的x位置,然后该组中的所有元素也会移动.但这似乎不可能.
给定一个以(200,200),半径25为中心的圆,如何绘制从270度到135度的弧和一个从270度到45度的弧?
0度表示它在x轴(右侧)上(意味着它是3点钟位置)270度表示它是12点钟位置,90表示它是6点钟位置
更一般地说,圆弧的一部分的圆弧路径是什么
x, y, r, d1, d2, direction
Run Code Online (Sandbox Code Playgroud)
含义
center (x,y), radius r, degree_start, degree_end, direction
Run Code Online (Sandbox Code Playgroud) 我有以下代码:
<span>
<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
<desc></desc>
<defs/>
<path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
</svg>
</span>
Run Code Online (Sandbox Code Playgroud)
是否可以使用CSS或其他方法更改SVG路径的填充颜色而不在路径标记内实际更改它?
我想在 SVG中显示一些文本rect
.可能吗?
我试过了
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="0" y="0" width="100" height="100" fill="red">
<text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
</rect>
</g>
</svg>
Run Code Online (Sandbox Code Playgroud)
但它不起作用.
是否可以background-image
为SVG <path>
元素设置?
例如,如果我设置元素class="wall"
,CSS样式.wall {fill: red;}
可以工作,但.wall{background-image: url(wall.jpg)}
不会.wall {background-color: red;}
.
这是通常的SVG mime类型:
image/svg+xml
Run Code Online (Sandbox Code Playgroud)
而且效果很好.但是,当嵌入SVG字体时,chrome会告诉您mime类型不正确,显然是因为您返回的是字体而不是图像.
有没有通用的哑剧类型?铬错了吗?application/svg+xml
以某种方式被接受?
我想这仍然是HTML5中的一个灰色区域,但有人可能会知道.