程序设计 svg

6

我正在为SVG文件处理一些ECMAScript / JavaScript，并且需要获取width和height的text元素，因此我可以调整包围它的矩形的大小。在HTML中，我可以在元素上使用offsetWidth和offsetHeight属性，但这些属性似乎不可用。这是我需要处理的片段。每当更改文本时，我都需要更改矩形的宽度，但是我不知道如何获取元素的实际width（以像素为单位）text。 <rect x="100" y="100" width="100" height="100" /> <text>Some Text</text> 有任何想法吗？

105 javascript dom text svg

2

enable-background属性到底能做什么？

该enable-background属性到底能做什么？我阅读了规范，但仍然不明白。

104 svg

6

如何在SVG中设置变换原点

我需要使用JavaScript调整SVG文档中的某些元素的大小并旋转它们。问题是，默认情况下，它始终围绕(0, 0)左上角的原点应用变换。如何重新定义此变换锚点？我尝试使用该transform-origin属性，但它不会影响任何内容。这是我的方法： svg.getDocumentById('someId').setAttribute('transform-origin', '75 240'); 尽管我可以在Firefox中看到正确设置了属性，但似乎没有将枢轴点设置为我指定的点。我尝试之类的东西center bottom，并50% 100%有和没有括号。到目前为止没有任何工作。有人可以帮忙吗？

104 svg coordinate-transformation

1

SVG中的固定笔划宽度

我希望能够将SVG元素的笔触宽度设置为“像素感知”，无论当前应用了什么缩放转换，该宽度始终为1px。我知道这很可能是不可能的，因为SVG的全部要点是像素无关的。上下文如下：我有一个SVG元素，其viewBox和prepareAspectRatio属性设置了。看起来像这样 <svg version="1.1" baseProfile="full" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" > </svg> 这意味着当我缩放该元素时，其内部的实际形状也会相应缩放（到目前为止很好）。如您所见，我已经设置了viewBox，以使原点位于中心。我想在该元素内绘制一个x轴和y轴，因此我这样做： <line x1="-1000" x2="1000" y1="0" y2="0" /> 同样，这很好。但是，理想情况下，此轴始终始终只有1px宽。当我缩放父级svg元素时，我对轴变得更胖没有兴趣。那我搞砸了吗？

103 svg visualization

14

如何使用外部CSS设置SVG样式？

我有几个SVG图形，我想通过我的外部样式表修改颜色，而不是直接在每个SVG文件中。我不是将图形插入行中，而是将它们存储在我的图像文件夹中并指向它们。我以这种方式实现了它们，以使工具提示能够正常工作，并且我还将每个工具提示都包装在<a>标签中以允许链接。 <a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a> 这是SVG图形的代码： <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="stylesheets/main.css" type="text/css"?> <!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" viewBox="0 0 56.69 56.69"> <g> <path d="M28.44......./> </g> </svg> 我将以下内容放入我的外部CSS文件（main.css）中： .socIcon g {fill:red;} 但是，它对图形没有影响。我还尝试了.socIcon g路径{}和.socIcon路径{}。某些情况不正确，也许我的实现不允许外部CSS修改，或者我错过了一步？非常感谢您的帮助！我只需要能够通过我的外部样式表修改SVG图形的颜色，但是我不会失去工具提示和链接功能。（尽管我可能没有工具提示也可以生活。）谢谢！

102 html css svg stylesheet external

6

使用C＃将SVG转换为PNG [关闭]

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。想改善这个问题吗？更新问题，使其成为Stack Overflow 的主题。 6年前关闭。改善这个问题我一直在尝试使用C＃将SVG图像转换为PNG，而不必编写太多代码。谁能推荐这样做的库或示例代码？

102 c# .net png svg

6

使用CSS的SVG渐变

我正在尝试将渐变应用于SVG rect元素。目前，我正在使用该fill属性。在我的CSS文件中： rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } rect在浏览器中查看时，元素具有正确的填充色。但是，我想知道是否可以对这个元素应用线性渐变吗？

102 css svg gradient linear-gradients

11

SVG中文本的背景色

我想像在CSS中text一样给SVG的背景上色background-color 我只能找到有关的文档fill，该文档使文本本身着色可能吗？

101 css svg background-color

12

如何在React Native上显示SVG文件？

我想显示svg文件（我有一堆svg图像），但是我找不到显示方法。我尝试使用react-native-svg的Image和Use组件，但是它们不能使用。我试图用本机的方式做到这一点，但是要显示svg图像确实非常困难。示例代码： import Svg, { Use, Image, } from 'react-native-svg'; <View> <Svg width="80" height="80"> <Image href={require('./svg/1f604.svg')} /> </SvgRn> </View> 我也知道react native基本上不支持svg，但是我认为有人用棘手的方式解决了这个问题（有/没有react-native-svg）

101 javascript svg react-native

11

在Python中将SVG转换为PNG

如何转换的svg到png，在Python？我将储存svg在的实例中StringIO。我应该使用pyCairo库吗？如何编写该代码？

99 python svg rendering cairo

6

在SVG中嵌入SVG？

我有一个SVG文档，我想在其中包含一个外部svg图像，例如： <object data="logo.svgz" width="100" height="100" x="200" y="400"/> （“对象”仅是示例-外部文档将是SVG而不是xhtml）。有任何想法吗？这有可能吗？还是对我来说，最好只是将logo.svg xml拍到我的外部SVG文档中？

98 xml svg embedding

20

Chrome无法呈现通过<img>标签引用的SVG

我在使用Google Chrome无法通过img标签呈现svg时遇到问题。刷新页面和初始页面加载时会发生这种情况。我可以通过“检查元素”来显示图像，然后右键单击svg文件并在新选项卡中打开svg文件。svg图像将呈现在原始页面上。 <img src="../images/Aged-Brass.svg"> 关于问题所在，这里完全迷失了。svg图像可以在IE9和FF中很好地呈现，而不能在Chrome或Safari中呈现。我也设置了MIME类型。（图片/ svg + xml）编辑：这是一个简单的html页面，我建立该页面以帮助说明我的问题。 <!DOCTYPE html> <html> <head> <title>SVG Test</title> <style> #BackgroundImage{ background: url('../images/Aged-Brass.svg') no-repeat scroll left top; width: 400px; height: 600px; } #ImageTag{ width: 400px; height: 600px; margin: 0px; padding: 0px; } </style> </head> <body> <div id="ImageTag"> <img src="../images/Aged-Brass.svg"> </div> <div id="BackgroundImage"></div> …

95 google-chrome svg

1

如何缩放SVG图像以填充浏览器窗口？

这似乎应该很容易，但是我没有得到任何东西。我想制作一个包含单个SVG图像的HTML页面，该图像会自动缩放以适合浏览器窗口，而无需任何滚动并保持其纵横比。例如，目前我有一个1024x768的SVG图片；如果浏览器视口为1980x1000，则我希望图像以1333x1000显示（垂直填充，水平居中）。如果浏览器是800x1000，那么我希望它以800x600显示（水平填充，垂直居中）。目前，我的定义如下： <body style="height: 100%"> <div id="content" style="width: 100%; height: 100%"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMid meet"> ... </svg> </div> </body> 但是，这会放大到浏览器的整个宽度（对于宽而短的窗口）并产生垂直滚动，这不是我想要的。我想念什么？

94 layout xhtml svg scaling aspect-ratio

3

如何仅在SVG形状的某些边上设置笔划宽度：1？

设置笔触宽度：<rect>在SVG中的元素上设置1会在矩形的每一边上放置笔触。如何仅在SVG矩形的三个边上放置笔划宽度？

93 html svg vector-graphics inkscape

10

SVG和HTML5 Canvas有什么区别？

SVG和HTML5 Canvas有什么区别？他们似乎都对我做同样的事情。基本上，它们都使用坐标点绘制矢量插图。我想念什么？SVG和HTML5 Canvas之间的主要区别是什么？为什么我要选择一个？

92 html canvas svg

Questions tagged «svg»