Tag: svg

如何缩放SVG图像以填充浏览器窗口？: 这似乎应该是容易的，但我只是没有得到的东西。我想制作一个包含单个SVG图像的HTML页面，该图像可自动缩放以适应浏览器窗口，无需任何滚动，同时保持其高宽比。例如，目前我有一个1024×768的SVG图像; 如果浏览器的视口是1980×1000那么我希望图像显示在1333×1000（垂直填充，水平居中）。如果浏览器是800×1000那么我希望它显示在800×600（水平填充，垂直居中）。目前我有这样的定义： <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> 然而，这是扩大到浏览器的全宽（对于一个宽而短的窗口），并产生垂直滚动，这不是我想要的。我错过了什么？

Android上的SVG支持: Android支持SVG吗？任何例子？

弧外标签（饼图）d3.js: 我是d3.js的新手，我试图做一个饼图，我只有一个问题：我不能在我的弧线之外得到我的标签…标签的位置是arc.centroid arcs.append("svg:text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("text-anchor", "middle") 谁能帮助我呢？

如何在浏览器中检测对VML或SVG的支持？: 我正在写一点JavaScript，需要在SVG或VML（或者两者兼有，或其他的东西，这是一个奇怪的世界）之间进行select。虽然我知道，现在只有IE浏览器支持VML，我宁愿检测function比平台。 SVG似乎有几个属性，你可以去：window.SVGAngle例如。这是检查SVG支持的最佳方法吗？ VML有没有等价物？不幸的是 – 在Firefox中，我可以非常高兴地在VML中完成所有的渲染，没有任何错误 – 屏幕上什么都没有发生。从脚本中检测这种情况是相当困难的。

使一个html svg对象也是一个可点击的链接: 我在我的HTML页面中有一个SVG对象，并将其包装在一个锚点中，所以当单击svg图像时，它将把用户带到锚点链接。 <a href="http://www.google.com/"> <object data="mysvg.svg" type="image/svg+xml"> <span>Your browser doesn't support SVG images</span> </object> </a> 当我使用这个代码块时，单击svg对象不会把我带到谷歌。在IE8中，span文本是可点击的。我不想修改我的svg图像来包含标签。我的问题是，如何使svg图像可点击？

如何逐步绘制vectorpath？（Raphael.js）: 如何animation像绘制的vectorpath，逐步？换句话说，逐个像素缓慢地显示path。我正在使用Raphaël.js ，但是如果你的答案不是库特定的，比如说可能有一些用于做这种事情的一般编程模式（我对vectoranimation相当陌生），这是值得欢迎的！使用直线path很容易，就像在该页面上的示例一样简单:: path("M114 253").animate({path: "M114 253 L 234 253"}); 但是尝试改变那个页面上的代码，这样说： path("M114 26").animate({path: "M114 26 C 24 23 234 253 234 253"}); 你会明白我的意思 path肯定是从初始状态（点“M114 26”）到结束状态（从点“M114 26”开始的曲线“C 24 23 234 253 234 253”）animation的，但不是以问题指定的方式，而不是它正在绘制。我不明白animateAlong如何做到这一点。它可以沿着一条pathanimation一个物体，但是如何让这条path在物体沿着它被animation的时候逐渐显示出来呢？解决scheme？（通过陨石的答案）似乎目前最好的方法是通过使用原始SVG的“虚假”破折号。有关解释，请参阅本演示或本文档，第4页。如何产生渐进式绘画？我们必须使用stroke-dasharray和stroke-dashoffset并且知道曲线的长度。此代码在屏幕上为圆，椭圆，折线，多边形或path绘制任何内容： <[element] style="stroke-dasharray:[curve_length],[curve_length]; stroke-dashoffset:[curve_length]"/> 如果在animation元素stroke-dashoffset减less到0，我们得到曲线的渐进绘制。 <circle cx="200" cy="200" r="115" style="fill:none; […]

添加自定义图标字体真棒: 我喜欢Font Awesome图标字体，并希望将其用于我网站上的大多数图标，但除了提供的内容外，还有一些我需要的自定义svg图标。我注意到Font Awesome的.svg版本主要由这些<glyph />元素组成： … <glyph unicode="" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 […]

Chrome中的文件Url跨域问题 – 意外: 这个问题是关于使用文件URL抛出跨域错误的Chrome 我正在embedded一个svg文件到HTML中使用相对path的forms的数据属性的对象标签，onload事件我想要使用getSVGDocument（）获取SVGDocument。我正在使用文件url访问html文件，当getSVGDocument被调用时，Chrome会给出一个跨域错误。 Chrome实际上embedded了SVG，但getSVGDocument不会返回SVG的DOM “Chrome错误”是“不安全的JavaScript尝试从URL文件：/// C：/ MyFiles / website / Dir1 / index的帧中访问具有URL文件的框架：/// C：/MyFiles/website/Dir1/a.svg。 html域名，协议和端口必须匹配。“ 正如你可能看到的基本path是相同的HTML和embedded式文件svg，那么为什么Chrome抛出这个错误？

JavaScript访问SVG的内部DOM: test.php是一个用PHP生成的SVG对象。 <object data="test.php" type="image/svg+xml" id="SVG" /> <script> var mySVG = document.getElementById("SVG"); var svgDoc = mySVG.contentDocument; svgDoc为null。（所以我不能通过JS访问svg的元素。）它应该工作，看这个问题。我究竟做错了什么？我怎样才能得到我的SVG的contentDocument ？

SVG / XML中有一些innerHTMLreplace吗？: 在HTML中，我可以通过提供一个stringforms的模板来构build一个简单的模板系统，replace它的一些部分，然后使用innerHTML将其分配给某个容器。 var templ = '<span>{myText}</span>' var newContent = templ.replace( '{myText}', someVariable ); document.querySelector( '#myContainer' ).innerHTML = newContent; 这样我可以利用浏览器的HTMLparsing器，而不必重复使用document.createElement() 。如果模板增长超过几个元素，后者可能非常麻烦。然而，在SVG中，作为innerHTML的元素，甚至innerSVG都没有这个属性。所以我的问题是：有没有什么我可以在SVG中使用ro类似于上面的例子的方法，或者我坚持document.createElement() （或者respectivly一些使用它的lib）？与我的问题一样：Vanilla JavaScript解决scheme是首选，但任何指向提供解决scheme的lib指针表示赞赏。