Tag: svg

用JavaScript创buildSVG标签: 如何用JavaScript创build一个SVG元素？我试过这个： var svg = document.createElement('SVG'); svg.setAttribute('style', 'border: 1px solid black'); svg.setAttribute('width', '600'); svg.setAttribute('height', '250'); svg.setAttribute('version', '1.1'); svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); document.body.appendChild(svg); 但是它会创build一个零宽度和零高度的SVG元素。

d3js树广场: 我想用d3.js来构build谱系树。我发现的所有例子都展示了有机的树木。那里有像样式的血统书吗？

获取SVG元素的宽度/高度: 什么是正确的方式来获得svg元素的维度？ http://jsfiddle.net/langdonx/Xkv3X/ Chrome 28： style x client 300×100 offset 300×100 IE 10： stylex client300x100 offsetundefinedxundefined 火狐23： "style" "x" "client" "0x0" "offset" "undefinedxundefined" 在svg1上有宽度和高度属性，但是.width.baseVal.value只有在我设置元素的宽度和高度属性时才会设置。小提琴看起来像这样： HTML <svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" /> <circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" /> <circle cx="250" cy="50" r="40" stroke="black" stroke-width="1" fill="blue" /> </svg> JS […]

svg中的简单填充模式：对angular阴影: 起初，我认为我的问题是最简单的：如何填充SVG形状，而不是一个颜色，一个图像或一个渐变，但有一个孵化模式，如果可能对angular线。这已经2个小时了，我什么也没有发现（至less在2005年之后），我正在转向这个帮助我。我认为一个可能的黑客将是一个阴影的PNG，可以作为填充，但这并不理想。

iOS和其他平板电脑上的SVG性能状态？: 在决定使用D3.js和SVG进行可视化后，现在看起来SVG在桌面浏览器或本地shell中可以正常工作，但是我真的为iOS移动平台的性能下降感到困惑。根据下面的testing，现在看起来SVG的性能正在变得越来越好，而且还没有远远落后于Canvas的速度，这是一个好消息： http://bl.ocks.org/2647924 http://bl.ocks.org/2647922 坏消息是，如果你在新的iPad上的Safari浏览器中运行这些testing，SVG和Canvas的速度都会下降。可怕的消息是，如果您在iPad的新Chrome浏览器中运行这些testing，则速度会下降得更多。我读过谷歌被迫使用未被苹果的Nitro JavaScript引擎加速的UIWebview。我也读过苹果公司推HTML5，但演示只能在他们自己的Safari浏览器中运行。这里有什么问题吗？我的应用程序的最佳目标是移动设备，即使是像D3.js和HTML5标准的优秀API（例如SVG性能正在被压缩），这是否仅仅是因为苹果想要为自己的议程取得进展？多数民众赞成在我看来，无论如何。我不确定这些testing在Android上是什么样子的？这将是很高兴知道。如果testing会是积极的，也许我会摆脱iPad，只是与Android已经。底线是，我不确定是否可以使我的应用程序使用HTML5技术由于这些速度问题？我也没有兴趣学习Objective-C，因为未来将转向HTML5。我相信networking及其标准，但看起来像被阻止。我很想知道解决这个困境的方法。

我可以沿着SVGpath应用渐变吗？: 我想在我的网站上放置一个由脚本触发的简单加载指示器。它应该是一个简单的圆弧，它有一个渐变，并在用户等待时旋转。我还没有尝试animation部分，但现在暂时停留在静态样式上。这是迄今为止我所得到的： <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <defs> <linearGradient id="grad1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="transparent"/> </linearGradient> </defs> <path d="M50 10 A40 40 0 1 0 90 50" stroke="url(#grad1)" stroke-width="10" fill="transparent"/> </svg> 它从顶部边缘逆时针旋转到右边缘（270°），但是梯度是错误的。而不是沿着path开始（顶边0°）不透明，末端（右边270°）是透明的，弧形笔划的结果图像在屏幕空间中从左到右着色。我怎样才能使渐变沿着我的弧线？

纯SVG的方式来适应文本到一个盒子: 箱大小已知。文本string长度未知。将文本适合框，而不破坏其长宽比。经过一个晚上的谷歌search和阅读SVG规范，我敢肯定，这是不可能的，没有JavaScript。我能得到的最接近的是使用textLength和lengthAdjust文本属性，但只沿一个轴拉伸文本。 <svg width="436" height="180" style="border:solid 6px" xmlns="http://www.w3.org/2000/svg"> <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text> </svg> 我知道SVG缩放文本，以适应容器和适合的文本到框中

将PDF转换为SVG: 我想转换PDF到SVG，请build议一些图书馆/可执行文件，将能够有效地做到这一点。我已经使用apache PDFBox和Batik库编写了自己的java程序 – PDDocument document = PDDocument.load( pdfFile ); DOMImplementation domImpl = GenericDOMImplementation.getDOMImplementation(); // Create an instance of org.w3c.dom.Document. String svgNS = "http://www.w3.org/2000/svg"; Document svgDocument = domImpl.createDocument(svgNS, "svg", null); SVGGeneratorContext ctx = SVGGeneratorContext.createDefault(svgDocument); ctx.setEmbeddedFontsOn(true); // Ask the test to render into the SVG Graphics2D implementation. for(int i = 0 ; i < document.getNumberOfPages() ; […]

我可以将HTMLembeddedHTML5 SVG片段吗？: HTML5支持<svg>标签，允许将SVGembedded到HTML中。挖深一点，我可以在我的<svg>片段嵌套一些HTML？例如，我想在我的SVGgraphics的某个部分放置一个CSS'ed <table> 。我做了一个小testing，Chrome12不喜欢<svg>的HTML <p> <svg> 。有一些技术，使其工作（如也许是一个HTML容器标签？）？

是可以扩展内联SVG的CSS？: 我想使用CSS样式来控制SVGdevise的大小。例如… .svg { width:100%; } 当我从一个文件中embedded一个SVG图像时，它就像任何其他图像一样工作正常， <img src="image.svg" class="svg" /> 但是，当我使用内联SVG它不工作： <svg class="svg">…</svg> svg“盒子”会增长，但内容保持不变。有没有办法做到这一点？