Questions tagged «svg»

是否可以将SVG标记嵌入到ReactJS组件中？ render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } 结果错误： 不支持命名空间属性。ReactJSX不是XML。 最简单的方法是这样做。使用React React之类的东西对于我想做的事情来说是过大的手段。

127 javascript  svg  reactjs 

在typescript(*.tsx)文件中，我无法使用以下语句导入svg文件： import logo from './logo.svg'; Transpiler说：[ts] cannot find module './logo.svg'. 我的svg文件仅为<svg>...</svg>。 但是在.js文件中，我可以完全相同的导入语句导入它而不会出现任何问题。我想这与svg文件的类型有关，必须为ts transpiler设置某种方式。 您能否在ts文件中分享如何进行这项工作？

115 typescript  svg 

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗？更新问题，使其成为Stack Overflow 的主题。 2年前关闭。 改善这个问题 我正在尝试将PDF转换为SVG。但是，我目前正在使用的那个为每个文本中的每个字母都映射了一个路径，这意味着如果我更改其源文件中的文本，它看起来很丑。 我想知道最干净的PDF到SVG转换器是什么，希望其中没有一个不需要文本路径的文本区域。众所周知，PDF和SVG非常相似，因此我认为这里有一些不错的转换器。

114 pdf  svg 

因此，通常我会包括大多数需要简单样式的SVG图标，我这样做： <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> 现在，我一直在玩ReactJS作为它的后期评估在我的新的前端开发堆栈可能的成分，但是我注意到，在其支持的标记/属性列表，无论是use或xlink:href支持。 是否可以使用svg精灵并以这种方式在ReactJS中加载它们？

114 svg  sprite  reactjs 

我有一些SVG文件，指定width和height以及viewbox这样的： <svg width="576pt" height="432pt" viewBox="0 0 576 432" > ... 但是如何以我决定的大小在浏览器中显示它们？我希望它们变小并尝试： <object width="400" data="image.svg"></object> 但是然后我看到了可见的滚动条。 如果我的SVG文件更改设置它的工作原理width，并height以100%相反，但我想决定在HTML的大小，无论在SVG文件中使用什么尺寸。这可能吗 ？

114 html  svg 

我正在尝试选择用于更新项目的正确技术，该项目基本上在可缩放，可平移的图形中呈现数千个点。使用Protovis的当前实施效果不佳。在这里查看： http://www.planethunters.org/classify 完全缩小时大约有2000点。尝试使用底部的手柄放大一点，然后拖动以平移。您会发现它非常不稳定，除非您有一台非常快的计算机，否则您在一个内核上的CPU使用率可能会高达100％。对焦点区域的每次更改都需要重绘到原图，这相当慢，而且绘制的点数更多时更糟。 我想对界面进行一些更新，并更改底层的可视化技术，以更好地响应动画和交互。从下面的文章来看，似乎是在另一个基于SVG的库还是一个基于画布的库之间进行选择： http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ d3.js源自Protovis，它是基于SVG的，被认为在渲染动画方面更好。但是，我对性能有多好以及性能上限有疑问。因此，我也在考虑使用基于画布的库（例如KineticJS）进行更全面的大修。但是，在我深入研究一种或另一种方法之前，我想听听有人用如此大量的数据完成了类似的Web应用程序，并征求了他们的意见。 最重要的是性能，其次是增加其他交互功能和对动画进行编程的重点。一次最多可能不会超过2000个点，每个点上都有很小的误差线。放大，缩小和平移需要平滑。如果最新的SVG库在这方面是不错的，那么使用d3的便利性可能会超过KineticJS等的增加的设置。但是，如果使用canvas具有巨大的性能优势，尤其是对于计算机速度较慢的人，那么我绝对会喜欢这样。 NYTimes使用SVG制作的应用示例，但仍可以流畅地进行动画设置：http：//www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html 。如果我可以获得这种性能，而不必编写自己的画布绘制代码，则可能会选择SVG。 我注意到有些用户使用了d3.js操纵与画布渲染相结合的方式。但是，我在网上找不到有关此文档的大量文档，也无法与该帖子的OP联系。如果任何人有执行这种DOM到画布（演示，代码）实现的经验，我也希望听到您的来信。似乎可以操纵数据并可以自定义控制如何呈现数据（因此可以提高性能），这似乎是一种很好的混合方式，但是我想知道是否必须将所有内容加载到DOM仍然会减慢速度。 我知道存在一些与此问题类似的问题，但没有一个问题完全相同。谢谢你的帮助。 后续：我最终使用的实现位于https://github.com/zooniverse/LightCurves

114 html  canvas  svg  d3.js  kineticjs 

在处理XML时，我尝试href使用以下行将从属性引用的SVG文件直接复制到我的输出HTML中： <xsl:copy-of copy-namespaces="yes" select="document(@href)"/> 本copy-namespaces不应该是必要的，因为默认值是“yes”反正，但我已经添加，以防止有关是否我已经试过了问题。 这些文件被复制到HTML中，但是所有命名空间元素都已使用软管。例如，复制前的文件如下所示： <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:title/> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-519.21143,-667.79077)" id="layer1"> <image xlink:href="data:image/png;base64 之后看起来像这样： <_0:RDF xmlns:_0="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <_0:Work xmlns:_0="http://creativecommons.org/ns#" about=""> <_0:format xmlns:_0="http://purl.org/dc/elements/1.1/">image/svg+xml</_0:format> <_0:type xmlns:_0="http://purl.org/dc/elements/1.1/" resource="http://purl.org/dc/dcmitype/StillImage"/> <_0:title xmlns:_0="http://purl.org/dc/elements/1.1/"/> </_0:Work> </_0:RDF> </metadata> <g id="layer1" transform="translate(-519.21143,-667.79077)"> <image href="data:image/png;base64 hrefimage元素值上缺少的xlink命名空间特别成问题。 关于如何在不做任何解释的情况下以不同方式读取SVG文件的任何想法？ 我找到了一个“可行”的解决方案，但这是一个hack，我想要更优雅的东西： <xsl:template name="topic-image-svg"> <!-- Generate tags …

113 html  xml  svg  xslt-1.0  xslt-2.0 

截至2020年，应使用哪些网站图标尺寸，文件格式和元/链接标签？其中包括Apple图标，Windows，Android和当今人们使用的其他设备。 我使用Opera，可以看到它支持svg格式。是当今使用svg的最佳解决方案吗？是否有“一个文件可以容纳所有文件”的选项？ 我浏览了许多网站，并检查了不同的“网站图标生成器”。他们都已经岁了，并且大多数使用png文件。 例如： ico和svg应该使用什么代码？ <link rel="icon" href="favicon.ico" type="image/ico"> <link rel="icon" href="favicon.svg" type="image/svg+xml"> 还是应该指定尺寸（如果ico包含更多尺寸）？我找不到一个好的答案。 <link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico"> 请提供应该使用哪些图标的尺寸，文件格式和元/链接标签。

113 html  svg  png  favicon 

目标是使<svg>元素扩展到其父容器的大小，在这种情况下为a <div>，无论该容器有多大或多小。 代码： <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> 解决此问题的最常见方法似乎是viewBox在<svg>元素上设置属性。 viewBox="0 0 widthOfContainer heightOfContainer" 但是，这在元素内的<svg>元素具有预定义的宽度和/或高度的情况下似乎不起作用。例如，<rect>在上面的代码中，元素的宽度和高度已明确设置。 因此，显而易见的解决方案是在这些元素上也使用百分比宽度和百分比高度。但这是否必须要做？特别是，由于<img src=test.svg >可以很好地工作并且可以在没有明显设置<rect>高度和宽度的情况下进行扩展/收缩。 如果像这样的元素<rect>和其他类似的元素必须以百分比定义其宽度和高度，则Inkscape中可以通过一种方式对其进行设置，以使<svg>文档中的所有元素都使用百分比的宽度，高度等。 ？

112 css  html  svg  responsive-design 

我正在一个Web项目上，该项目涉及动态生成的美国地图，该地图根据一组数据为不同的州着色。 该SVG文件为我提供了美国的空白地图，并且非常容易更改每个州的颜色。困难在于IE浏览器不支持SVG，因此为了使我能够使用svg提供的便捷语法，我需要将其转换为JPG。 理想情况下，我只想使用GD2库执行此操作，但也可以使用ImageMagick。我完全不知道如何执行此操作。 将考虑允许我动态更改美国地图上各州颜色的任何解决方案。关键是它很容易即时更改颜色，并且它是跨浏览器的。请仅使用PHP / Apache解决方案。

111 php  svg  imagemagick  jpeg  gd2 

我刚遇到一个非常奇怪的问题，该问题只在Safari 10中显示。我有纸牌，svg图像，有时会使用来旋转transform:rotate(xdeg)。 我正在使用的卡有红色方块图案。当它不旋转或以直角（即90、180、270）旋转时，它看起来很正常。但是，除此以外的任何角度都将使背景图案变成蓝色！我刚刚从一个用户那里得到了一份关于此的报告，却从未见过如此怪异的东西。其他浏览器均正常运行，Safari 9正常运行。 我猜这只是Safari 10中一个非常奇怪的错误，但是有关如何解决它的任何想法？我在以下位置创建了最小复制： https://jsfiddle.net/2zv4garu/1/

109 html  css  svg  safari 

我想<text>在SVG中显示<rect>与HTML文本填充<div>元素相同的方式将自动换行到容器的内容。有办法吗？我不想使用<tspan>s 来谨慎地定位线条。

108 xml  text  svg  word-wrap 

使用<svg>标记将SVG直接包含在文档中时，您可以通过文档的样式表将CSS样式应用于SVG。但是，我试图将一种样式应用于嵌入的SVG（使用<object>标签）。 是否可以使用以下代码？ object svg { fill: #fff; }

107 html  css  svg 

所以这是我所拥有的： <path class="..." onmousemove="show_tooltip(event,'very long text \\\n I would like to linebreak')" onmouseout="hide_tooltip()" d="..."/> <rect class="tooltip_bg" id="tooltip_bg" ... /> <text class="tooltip" id="tooltip" ...>Tooltip</text> <script> <![CDATA[ function show_tooltip(e,text) { var tt = document.getElementById('tooltip'); var bg = document.getElementById('tooltip_bg'); // set position ... tt.textContent=text; bg.setAttribute('width',tt.getBBox().width+10); bg.setAttribute('height',tt.getBBox().height+6); // set visibility ... } ... 现在，即使我使用alert（），我的很长的工具提示文本也没有换行符。它向我显示文本实际上有两行。（不过，它包含一个“ …

107 javascript  svg  newline  line-breaks 

svg的x和dx属性（或y和dy）有什么区别？什么时候才是使用轴移属性（dx）和位置属性（x）的合适时间？ 例如，我注意到很多d3示例都做了这样的事情 chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3) .text("I am a label") 当以下内容似乎做相同的事情时，同时设置y和dy的优点或理由是什么？ chart.append("text") .attr("x", 0) .attr("y", -3) .text("I am a label")

106 svg  d3.js