Tag: svg

如何从Illustrator（或类似的工具）创buildAndroid VectorDrawables？: 如果我在像Illustrator这样的程序中使用vector图像，那么我怎样才能使用Android的VectorDrawable框架使用正确的格式呢？我find了一个工具来将SVG转换为VectorDrawable xml格式： http ://inloop.github.io/svg2android/，但它只需要使用“path”的SVG。任何想法如何输出这样的文件？

D3 – 如何处理JSON数据结构？: 我是D3的新手，已经花了几个小时的时间来找出处理结构化数据的任何事情，但没有积极的结果。我想用下面的数据结构创build一个条形图。酒吧（水平）绘制，但只为用户“吉姆”。 var data = [{"user":"jim","scores":[40,20,30,24,18,40]}, {"user":"ray","scores":[24,20,30,41,12,34]}]; var chart = d3.select("div#charts").append("svg") .data(data) .attr("class","chart") .attr("width",800) .attr("height",350); chart.selectAll("rect") .data(function(d){return d3.values(d.scores);}) .enter().append("rect") .attr("y", function(d,i){return i * 20;}) .attr("width",function(d){return d;}) .attr("height", 20); 任何人都可以指出我做错了什么？

鼠标在自动缩放的SVG中的位置: 我正在遇到有关SVG文档中鼠标光标位置的问题。我想devise一个电位器，它将在拖动时跟随光标，在HTML页面中使用JavaScript 。我试过evt.clientX / Y和evt.screenX / Y，但是因为我的SVG在自动缩放，SVG内部的坐标是不同的。我一直在寻找一个好几天的答案，但我找不到任何解决scheme（要么实时了解我的SVG缩放因子，要么在SVG坐标系统中有鼠标位置的function）。轮换将遵循一个简单的规则：如果（evt.screenX <xc） ang = Math.atan（（evt.screenY-yc）/（evt.screenX-xc））* 360 /（2 * Math.PI） – 90; 如果（evt.screenX> xc） ang = Math.atan（（evt.screenY-yc）/（evt.screenX-xc））* 360 /（2 * Math.PI）+90; 以（xc; yc）作为旋转中心，并用SVG内的鼠标坐标replace所有evt.screenX / Y。

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

在Windows Azure网站中使用SVG: 有谁知道是否有可能将SVG MIMEtypes添加到Windows Azure网站？我尝试了一个web.config文件，但只是打破了我的网站。这是目前预览的限制还是我错过了什么？谢谢你的帮助！

如何使一个光滑的虚线边框旋转animation，如“行军ant”: 我正在使用“齿轮和链”的cssanimation，但无法创build“平滑”的边框旋转序列。你可以看到这个小提琴如何（当前）我正在使用一个伪元素来产生“旋转”的效果。这是通过在白色虚线和虚线金色边框之间“切换”来完成的，使得它看起来像是“边框正在旋转”。我拥有的 #one{ -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */ -o-animation: rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */ animation: rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */ } #two{ -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: […]

Github贡献图: 有一个github.com附带的精彩贡献图表。有人知道他们是否使用某种图书馆或gem？如果它是开源的，我也想用它来做我的项目。看起来不错！

什么是优化SVG的一些select？: 我有多个SVG，其中一些相当大（11MB），它们是使用pdf2svg从PDF创build的。问题是SVG太大，需要很长的时间才能打开，而且不必要的复杂。它主要包含文本和一些图像（思考报纸），文本被分成小块的文字，甚至不是文字。我需要对其进行优化，首先要减小尺寸，并且要减less元素的数量，使其加载速度更快。我到目前为止唯一想到的就是查看一行中的字符，并将它们join到一个<tspan> 。这应该会减less文本元素的数量，因为它看起来像是1-5个字母的组。但我正在寻找更多的东西，我可以做的SVG缩小尺寸。还有一个主要字体，用于大约95％的文本，但是现在，所有文本都被定义为字形（呈现形状）。是否可以embedded字体，所以文本呈现为文本，而不是形状？另外如果你知道任何更好的库转换PDF格式为SVG，我会很感激任何input。唯一的要求是它的SVG输出看起来应该和PDF完全一样。我还想指出速度并不重要。只要产生了所需的结果，转换花费的时间就不重要了。

Google网页字体在Windows上的Chrome中呈现波涛汹涌: 我在我的网站上使用Google Webfonts服务，并严重依赖它。它在大多数浏览器上呈现良好，但是在Windows上的Chrome中呈现得尤其糟糕。非常波涛汹涌，像素化。到目前为止，我发现Chrome需要首先加载.svg格式的字体。然而，我使用的字体Asap仅在.woff中可用。我使用免费的在线服务将其转换为.svg，但是当我将它添加到我的样式表（.woff之前）时，它没有改变任何东西。我也试过： -webkit-font-smoothing: antialiased; text-shadow: 0px 0px 0px; 希望能够帮助文本更加stream畅地呈现。现在我已经用尽了想法，我不想改变字体。有没有人有一个想法，我可以解决这个问题？我一直在使用Adobe Browserlab来testing渲染，看到我只拥有一个mac。链接到该网站是： www.symvoli.nl/about 提前致谢！编辑2013年4月11日： Chrome 35 Beta似乎终于解决了这个问题：

NVD3图表无法计算Chrome中的图例文字长度，因为Window.getComputedStyle不能正确返回字体大小: 背景信息我使用它的自定义小部件框架，将NVD3图表集成到Eclipse-RAP中。图表生成到一个div。通过在javascript中创build链接条目来dynamic加载CSS。我通过创build一个SVG /文本元素来检查CSS是否已经被加载，并且检查它的font-size是否正确（请参阅https://stackoverflow.com/a/7997710/337621 ）。如果CSS被加载，我创build图表。问题出于某种原因，图表在Chrome中无法正确显示。通常第一次在我的会话中显示正确，但第二次它始终是错误的。对于错误的情况，我已经在控制台中发现了这一点： Error: Invalid value for <g> attribute transform="translate(NaN,5)" 如果我重绘图表（例如通过更新图表数据或resize），图例正确呈现。预期：错误的布局：经过一些debugging，我find了相关的d3代码部分。 NVD3使用此函数请求SVG文本元素的字体大小： d3_selectionPrototype.style = function(name, value, priority) { var n = arguments.length; if (n < 3) { if (typeof name !== "string") { if (n < 2) value = ""; for (priority in […]