Tag: svg

快速响应的交互式图表/graphics：SVG，Canvas，其他？: 我正在尝试select正确的技术来更新一个基本上呈现可缩放，可移动graphics中的数千个点的项目。目前使用Protovis的实施效果不佳。看看这里： http://www.planethunters.org/classify 完全缩小大约有2000点。尝试使用底部的手柄放大一点，并拖动它平移。你会发现它是非常不稳定的，你的CPU使用率可能会在一个内核上达到100％，除非你有一台非常快的计算机。对焦点区域的每一个改变都会调用protovis来重绘，这相当慢，而且在绘制更多的点时会变得更糟。我想对界面进行一些更新，并将底层的可视化技术更改为对animation和交互更加敏感。从下面的文章中，似乎可以select另一种基于SVG的库或基于canvas的库： How to Choose Between Canvas and SVG 从Protovis发展而来的d3.js是基于SVG的，在渲染animation方面应该更好。不过，我很怀疑它的性能上限是多less。出于这个原因，我还在考虑使用像KineticJS这样的基于canvas的库进行更彻底的检修。然而，在我使用这种或那种方法过度使用之前，我想听听有人用这么多的数据完成了一个类似的Web应用程序，并得到他们的意见。最重要的是性能，次要的重点是易于添加其他交互function和编程animation。一次可能不会超过2000点，每个点都有小错误。放大，缩小和平移需要平滑。如果最近的SVG库在这方面比较体面，那么使用d3的难易程度可能会超过KineticJS的增加设置等。但是如果使用canvas有很大的性能优势，特别是对于电脑速度较慢的用户，那么我肯定会喜欢这样。由使用SVG的NYTime制作的应用程序示例，但仍可以stream畅地animation： http ://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html 。如果我可以得到这样的性能，而不必编写自己的canvas代码，那么我可能会selectSVG。我注意到一些用户已经使用了与canvas渲染相结合的d3.js混合操作。不过，我无法在网上find很多关于这个post的文档，也没有联系到这个post的OP。如果任何人有任何这样的DOM到canvas（演示，代码）实现的经验，我想也听到你的。这似乎是能够操纵数据和自定义控制如何呈现它（以及因此性能）的一个很好的混合体，但是我想知道是否必须将所有内容加载到DOM仍然会减慢速度。我知道有一些类似于这个问题的现存问题，但是他们中的任何一个都没有问过同样的问题。谢谢你的帮助。后续：我最终使用的实现是在https://github.com/zooniverse/LightCurves

使用copy（）与document（）将SVG添加到XHTML输出: 在处理我的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 图像元素的href值上缺lessxlink命名空间是特别有问题的。任何想法，我可以做不同的方式读取SVG文件没有任何解释？我发现了一个“有效”的解决scheme，但这是一个黑客，我想要更优雅的东西： <xsl:template name="topic-image-svg"> <!– Generate tags to embed SWFs –> […]

从Illustrator导出Web的SVG的最佳设置？: 我正在寻找一个网站使用SVG标志 – 使其在所有设备的响应式devise上看起来不错。但是由于存在问题，我希望支持尽可能多的设备和浏览器。加载速度也是一个重要的考虑因素。 Adobe Illustrator中的导出设置如何适应这一切？在Illustrator中，SVG导出有几个选项。首先，哪个SVGconfiguration文件最好？我认为SVG Tiny有一个较低的文件大小？很多设备是否支持SVG Tiny？最重要的区别是什么？（不必读这个W3怪物。）其次，我认为图像位置的最佳select是“链接”？（感叹号后请参阅说明。）或者，浏览器如何支持“embedded”选项？谢谢！ PS会有一个后备Alpha-PNG选项，但我希望SVG得到最好的支持。（想想吧，像JPG这样的后备选项 – 在这种情况下可能是最好的select，因为alpha-PNG本身需要一个老版IE的解决scheme。）更新：还有更多的选项可以configuration。我不使用文本，所以我看到的唯一相关的是小数位。对于标志，显示最大200x200px（在Retina显示器上为400x400px），是“3”最好的设置？或“2”以最小化文件大小？

右mimetypes为embedded字体的SVG图像: 这是通常的SVG mimetypes： image/svg+xml 它运作良好。但是，在embeddedSVG字体时，chrome告诉你mimetypes不正确，显然是因为你返回了一个字体而不是图像。有没有任何通用的MIMEtypes？是铬错了？ application/svg+xml接受不知何故？我想这仍然是HTML5中的一个灰色区域，但有人可能知道。

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> 但它不起作用。

img src SVG改变填充颜色: HTML <img src="logo.svg" alt="Logo" class="logo-img"> CSS .logo-img path { fill: #000; } 上面的svg加载和本地fill: #fff但是当我使用上面的css来尝试改变它黑色它不会改变，这是我第一次玩SVG，我不知道为什么它不工作。

使用HTML5和iPad捕获签名: 任何人都知道如何做到这一点？你会使用canvas对象，SVG，jQuery等？

SVG定位: 我正在玩SVG，并且在定位时遇到了一些问题。我有一系列g组标签中包含的形状。我希望像容器一样使用它，所以我可以设置它的x位置，然后该组中的所有元素也将移动。但这似乎不可能。大多数人如何定位一系列你想要一起移动的元素？有没有相对定位的概念？例如相对于其父母

你可以控制SVG的笔画宽度是如何绘制的？: 目前正在构build基于浏览器的SVG应用程序。在这个应用程序，各种形状可以由用户，包括矩形风格和定位。当我将一个stroke-width应用到1px的SVG rect元素时，笔划被应用于rect的偏移量，并由不同的浏览器以不同的方式插入。这被certificate是麻烦的，特别是当我尝试计算矩形的外部宽度和可视位置并将其放置在其他元素旁边时。例如： Firefox添加了1px插图（底部和左侧）和1px的偏移量（顶部和右侧） Chrome添加了1px的插入（上和左）和1px的偏移（下和右）到目前为止，我唯一的解决scheme是自己绘制实际边框（可能使用path工具），并将边框放在描边元素后面。但是这个解决scheme是一个令人不快的解决办法，如果可能的话，我宁愿不要走这条路。所以我的问题是，你能控制如何在元素上绘制SVG的stroke-width吗？