程序设计 svg

8

svg背景图片的位置始终在Internet Explorer中居中，尽管背景位置为：左居中；

我正在使用SVG徽标作为背景图片，但似乎无法使其在Internet Explorer （编辑：和Safari）中正确对齐到左侧。容器看起来像这样： <div id="header"> <div id="logo"></div> </div> 搭配款式： #header{ width: 100%; max-width: 1200px; height: 100%;} #logo{ background: url(../images/ss_logo.svg); background-position: left center; width: 100%; height: 100%; float: left;} 您可以看到<div>应当跨越其父项的100％，但在元素左侧显示徽标。在Chrome和Safari中这可以正常工作，但徽标始终<div id="logo">位于IE中的中心。似乎很难找到信息，其他人也遇到同样的问题吗？这是该问题的示例版本的链接，绿色框是SVG。

73 html css svg

2

D3将文本附加到SVG矩形

我正在将html附加到D3中的矩形上，以提供多行工具提示。底部是如何添加矩形，这可能是问题的一部分。最重要的是应该在我的世界中工作的代码。 newRect.().html(" <textArea font-family=Verdana font-size=20 fill=blue > Test " + "</br>" + "Test2 </textArea>"); 确实会将文本字段插入SVG，但不会显示： HTML： <rect id="rectLabel" x="490" y="674" width="130" height="160" fill="red"> <textarea fill="blue" font-size="20" font-family="Verdana"> Test </br>Test2 </textarea> </rect> 我有一个鼠标悬停在运行以下功能： newRect = svg.append("rect") .attr("x", xCor) .attr("y", yCor) .attr("width", 130) .attr("height", 160) .attr("fill", "red") .attr("id", "rectLabel"); 我认为我应该这样做，但是不起作用。它只是删除了我要附加的g.node。 newRect = …

73 javascript svg d3.js

6

如何使用<svg> viewBox属性？

我正在从官方文件中学习svg，有这样的说法。我不明白，如果它已经具有widthandheight属性，那么再次指定它又有viewBox="0 0 1500 1000"什么用呢？据说，“一个px单位被定义为等于一个用户单位。因此，“ 5px”的长度与官方文档中的“ 5”的长度相同，因此此viewBox的宽度为1500px， 1000高度视图，超过300px和200px。那么为什么要首先定义width和height值呢？ <svg width="300px" height="200px" version="1.1" viewBox="0 0 1500 1000" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">

73 svg

2

将VectorDrawable转换为SVG [关闭]

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。想改善这个问题吗？更新问题，使其成为Stack Overflow的主题。 3年前关闭。改善这个问题我VectorDrawable手动或使用网络工具进行了相反的转换（从SVG到）。但是我很难做相反的事情。我有，VectorDrawable但不确定如何将其转换为SVG，我可以找到零在线工具来实现。有没有人对此有经验，有哪些步骤或工具？

71 android svg android-vectordrawable

7

透明的空心或切出的圆圈

是否可以仅使用CSS切出空心圆？我们都可以做到：但是，我们可以这样做吗？该圆必须是空心且透明的。因此，不能通过将纯色圆圈放在上来解决问题div。

71 css svg transparency css-shapes

2

在SVG中对齐文本

我正在尝试使用行和简短文本片段（通常是两个或三个词）的混合来制作SVG XML文档。我遇到的主要问题是使文本与线段对齐。对于水平对齐方式，我可以使用text-anchor与left，middle或right。我找不到等效的垂直对齐方式。alignment-baseline似乎没有做到这一点，所以目前我dy="0.5ex"用作中心对齐的摇杆。是否有适当的方式与文本的垂直中心或顶部对齐？

70 xml svg

6

SVG到Android Shape [关闭]

从目前的情况来看，这个问题不适合我们的问答形式。我们希望答案能得到事实，参考或专业知识的支持，但是这个问题可能会引起辩论，争论，民意调查或扩展讨论。如果您认为此问题可以解决并且可以重新提出，请访问帮助中心以获取指导。 8年前关闭。我想知道如何在Android中使用 Shape类的类似于另一种矢量绘图标准。由于Shape是Drawable，并且Drawables通常定义为XML，所以听起来很像SVG中的矢量绘图命令。我的问题是：是否有人创建了XSLT转换或其他机制来将SVG绘图描述转换为Android Shapes？

70 android svg vector-graphics shape

2

如何在我的svg中添加超棒的字体图标？

我有一个包含图像的svg： <g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g> 如何用字体真棒图标替换该行： <g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g> 由于图像未显示，因此似乎无法正常工作。

70 css svg font-awesome

3

使用HTML内的javascript动态创建SVG元素

我想在HTML页面内创建一个矩形，然后在该矩形上写一些文本。我还需要该文本作为超链接。这是我所做的，但是没有用： <!DOCTYPE html> <html> <body> <script> var svg = document.documentElement; var svgNS = svg.namespaceURI; var rect = document.createElementNS(svgNS,'rect'); rect.setAttribute('x',5); rect.setAttribute('y',5); rect.setAttribute('width',500); rect.setAttribute('height',500); rect.setAttribute('fill','#95B3D7'); svg.appendChild(rect); document.body.appendChild(svg); var h=document.createElement('a'); var t=document.createTextNode('Hello World'); h.appendChild(t); document.body.appendChild(h); </script> </body> </html> 你能帮忙吗？谢谢。

70 javascript html svg

6

SVG重新排序z-index（Raphael可选）

创建后如何重新排序Raphael或它们的基础SVG元素。更好的是，SVG中是否存在类似图层的内容？理想情况下，我希望随时可以在其中放置元素的两层或多层；背景和前景层。如果这不是一种选择，则可以将元素弹出到前面是可以的，而在这种情况下将其推到后面会更好。谢谢，

69 javascript svg raphael

5

有没有办法预览可绘制的矢量

缺少构建和安装我的应用程序，有没有办法预览矢量可绘制xml文件？我已经将其内置到Android Studio中的一个小型测试应用中，并且可以将其作为布局文件的一部分进行预览，但是我希望有一种更简单的方法。编辑：这是我的drawable.xml文件的样子： <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <group> <path android:fillColor="#f5a625" android:strokeColor="#000000" android:strokeWidth=".5" android:pathData="M0,0l18,0l6,6l0,10l-24,0z" /> </group> </vector>

69 android svg

3

将SVG缩放到不带面罩/作物的容器

我尝试了许多svg参数变体，但对缩放此特定SVG并不满意。我正在尝试将此SVG包含在控制SVG大小的容器元素中。我的目标是500x309px。什么组合width，height，viewBox和preserveAspectRatio能够帮助我实现这个不具有SVG掩盖或不全？

69 html svg

9

创建闪电设计（例如Flash）

Наэтотвопросестьответына堆栈溢出нарусском：Создайтедизайнмолнии 我正在尝试在CSS中从Flash（DC漫画）（或Big Bang Theory的Sheldon Cooper穿的T恤）中重新创建闪电符号。这将像星级评分系统一样，只不过是“闪电评分系统”。但是，由于我试图将HTML保持在最低水平，因此我只想在CSS中设置样式。我已经到了以下阶段： html, body { margin: 0; height: 100%; background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%); } .wrap { height: 50vw; width: 50vw; position: relative; margin: 0 auto; } .circ:hover{ background:gray; } .circ:hover .bolt{ background:gold; } .circ …

69 html css svg css-shapes

6

使用D3.js（IE，Safari和Chrome）创建SVG后，如何保存/导出SVG文件？

我目前有一个使用D3的网站，我希望用户可以选择将SVG保存为SVG文件。我正在使用crowbar.js来执行此操作，但它仅适用于chrome。Safari没有任何反应，IE拒绝了click()crowbar.js中用于下载文件的方法的访问。 var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); 如何在我的网站上以safari，IE和chrome下载基于SVG元素的SVG文件？

69 javascript jquery svg d3.js

8

使用ImageMagick使用抗锯齿将SVG转换为透明PNG

我想将SVG图像转换为具有透明背景和抗锯齿边缘（使用半透明像素）的PNG文件。不幸的是，我无法让ImageMagick进行抗锯齿，边缘总是看起来很糟糕。这是我尝试过的： convert +antialias -background transparent in.svg -resize 25x25 out.png 有什么想法或我可以使用的其他命令行工具吗？

68 svg imagemagick png inkscape

Questions tagged «svg»