标签: svg

如何删除或替换SVG内容?

我有一段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元素或至少替换其内容?

javascript ajax svg d3.js

190
推荐指数
6
解决办法
19万
查看次数

你能控制SVG的笔画宽度是如何绘制的吗?

目前正在构建基于浏览器的SVG应用程序.在这个应用程序中,用户可以设置和定位各种形状,包括矩形.

当我将一个stroke-widthSVG rect元素应用于某个SVG 元素时1px,rect不同浏览器会以不同的方式将笔划应用于偏移和插入.这被证明是麻烦的,特别是当我尝试计算矩形的外部宽度和视觉位置并将其放置在其他元素旁边时.

例如:

  • Firefox增加1px插入(底部和左侧)和1px偏移(顶部和右侧)
  • Chrome增加了1px插页(顶部和左侧)和1px偏移(底部和右侧)

到目前为止,我唯一的解决方案是自己绘制实际边界(可能使用path工具)并将边框定位在描边元素后面.但是这个解决方案是一个令人不快的解决方案,如果可能的话,我宁愿不走这条路.

所以我的问题是,你能控制如何stroke-width在元素上绘制SVG 吗?

svg rect offset

188
推荐指数
6
解决办法
9万
查看次数

有没有办法将SVG用作伪元素中的内容:before或:after

我想在一些选定的元素之前放置一些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与我的问题相关.

css svg

188
推荐指数
9
解决办法
23万
查看次数

是否需要SVG参数,例如'xmlns'和'version'?

在互联网上看到的大约一半的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标签是否可以?我试过玩复杂的,如果我不包括它们,一切都很好.

xml tags svg

184
推荐指数
3
解决办法
4万
查看次数

SVG定位

我正在玩SVG并且在定位方面遇到了一些问题.我有一系列形状,包含在g组标签中.我希望像容器一样使用它,所以我可以设置它的x位置,然后该组中的所有元素也会移动.但这似乎不可能.

  1. 大多数人如何定位一组你希望同时移动的元素?
  2. 有相对定位的概念吗?例如,相对于其父母

grouping svg position

182
推荐指数
4
解决办法
17万
查看次数

如何计算圆弧(圆弧)的SVG路径

给定一个以(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)

svg

179
推荐指数
7
解决办法
12万
查看次数

我可以用CSS更改svg路径的填充颜色吗?

我有以下代码:

  <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>&nbsp;
  </span>
Run Code Online (Sandbox Code Playgroud)

是否可以使用CSS或其他方法更改SVG路径的填充颜色而不在路径标记内实际更改它?

css svg

169
推荐指数
8
解决办法
26万
查看次数

SVG:rect内的文本

我想 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)

但它不起作用.

svg text rect

162
推荐指数
4
解决办法
18万
查看次数

使用背景图像填充SVG路径元素

是否可以background-image为SVG <path>元素设置?

例如,如果我设置元素class="wall",CSS样式.wall {fill: red;}可以工作,但.wall{background-image: url(wall.jpg)}不会.wall {background-color: red;}.

html css svg image background-image

157
推荐指数
2
解决办法
18万
查看次数

右侧mime类型用于嵌入字体的SVG图像

这是通常的SVG mime类型:

image/svg+xml
Run Code Online (Sandbox Code Playgroud)

而且效果很好.但是,当嵌入SVG字体时,chrome会告诉您mime类型不正确,显然是因为您返回的是字体而不是图像.

有没有通用的哑剧类型?铬错了吗?application/svg+xml以某种方式被接受?

我想这仍然是HTML5中的一个灰色区域,但有人可能会知道.

html html5 svg font-face mime-types

157
推荐指数
1
解决办法
12万
查看次数

标签 统计

svg ×10

css ×3

html ×2

rect ×2

ajax ×1

background-image ×1

d3.js ×1

font-face ×1

grouping ×1

html5 ×1

image ×1

javascript ×1

mime-types ×1

offset ×1

position ×1

tags ×1

text ×1

xml ×1