Tag: svg

我怎样才能使用其父容器进行SVG缩放？: 我想有一个内联svg元素的内容时，尺寸是非本地的规模。当然，我可以把它作为一个单独的文件，并像这样扩展。 index.html： <img src="foo.svg" style="width: 100%;" /> <img src="foo.svg" style="width: 100%;" /> foo.svg： <svg width="123" height="456"></svg> 不过，我想添加额外的样式到SVG通过CSS，所以链接外部的不是一个选项。如何制作内联SVG缩放？

在CSS中内联SVG: 有没有可能在CSS中使用内联SVG定义？我的意思是这样的： .my-class { background-image: <svg>…</svg>; }

如何删除或replaceSVG内容？: 我有一段JavaScript代码，它创build（使用D3.js）包含图表的svg元素。我想根据来自使用AJAX的Web服务的新数据更新图表，问题是每次点击更新button时，它会生成一个新的svg ，所以我想删除旧的或更新其内容。这里是我创buildsvg的JavaScript函数的一个片段： var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); 如何删除旧的svg元素或至lessreplace其内容？

如何使用Image Magick将SVG转换为PNG？: 我有一个定义大小为16×16的SVG文件。当我使用图像Magick的转换程序将其转换为PNG，然后我得到一个16×16像素的PNG这是太小： convert test.svg test.png 我需要指定输出PNG的像素大小。 -size参数似乎被忽略， -scale参数在将PNG转换为PNG 后对其进行缩放。到目前为止，我通过使用-density参数得到了最好的结果： convert -density 1200 test.svg test.png 但是我不满意，因为我想用像素来指定输出大小，而不用math来计算密度值。所以我想要做这样的事情： convert -setTheOutputSizeOfThePng 1024×1024 test.svg test.png 那么我必须在这里使用什么神奇的参数？

如何在HTML中创build泪珠？: 如何创build一个这样的形状来显示在网页上？我不想使用图像，因为他们会缩放模糊我试着用CSS ： .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> 结果真的搞砸了。然后我尝试了SVG： <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> 它确实得到了形状，但底部没有弯曲。有没有办法创build这个形状，以便它可以在HTML页面中使用？

jQuery的SVG与拉斐尔: 我正在使用SVG和JavaScript / jQuery交互式界面，我试图在Raphael和jQuery SVG之间做出决定。我想知道两者之间的折衷是什么？发展势头似乎在哪里。我不需要Raphael的VML / IE支持，也不需要jQuery SVG的绘图function。我主要感兴趣的是在SVGcanvas上创build，animation和操作单个项目的最优雅的方式。

SVG填充颜色透明度/ alpha？: SVG填充颜色可以设置透明度或alpha级别吗？我已经尝试将两个值添加到填充标记（将其从填充=“＃044B94”更改为填充=“＃044B9466”），但这不起作用。

HTML5帆布与SVG与div: 在dynamic创build元素并能够移动它们的最佳方法是什么？例如，假设我想创build一个矩形，圆形和多边形，然后select这些对象并移动它们。我知道HTML5提供了三个可以实现这一点的元素： svg ， canvas和div 。对于我想要做的，哪一个元素将会提供最好的性能？为了比较这些方法，我想创build三个视觉相同的网页，每个页面都有一个页眉，页脚，小部件和文本内容。第一页中的小部件完全用canvas元素创build，第二个完全用svg元素创build，第三个用纯div元素HTML和CSS创build。

在HTML5中检测iPad Mini: 苹果公司的iPad Mini是iPad 2的一个更小的克隆，它比我们想要的更多。在JavaScript中， window.navigator对象公开了Mini和iPad 2的相同值。到目前为止我的testing来检测差异并没有成功。为什么这很重要？由于iPad Mini和iPad 2屏幕像素相同，实际尺寸（英寸/厘米）不同，因此它们的PPI （像素每英寸）也不相同。对于networking应用程序和游戏提供友好的用户界面，某些元素的尺寸相对于用户的拇指或手指位置进行了调整，因此，我们可能想要缩放某些图像或button以提供更好的用户体验。我到目前为止尝试过的东西（包括一些非常明显的方法）： window.devicepixelratio 以cm为单位的CSS元素宽度 CSS媒体查询（例如resolution和-webkit-device-pixel-ratio ）类似单位的SVG图纸做各种CSS webkit转换一段时间，并使用requestAnimFrame计算渲染帧（我希望能够检测到一个可测量的差异）我是新鲜的想法。你呢？更新感谢迄今的回应。我想评论一下投票反对检测iPad mini与2苹果有呃，一个指导方针来统治他们。好吧，这是我的推理，为什么我觉得在世界上真正知道一个人是否使用iPad mini或者2.使用我的推理你喜欢什么。 iPad mini不仅是一个小得多的设备（9.7英寸与7.9英寸），而且其外形允许不同的用途。除非你是查克·诺里斯（Chuck Norris），否则在游戏中通常会用两只手握住iPad 2。迷你比较小，但是它也轻很多，可以让玩家一手拿着游戏，用另一种方式轻扫或轻敲。作为一名游戏devise师和开发者，我只想知道它是否是一个迷你游戏，所以我可以select为玩家提供不同的控制策略（例如，在一组玩家进行A / Btesting之后）。为什么？那么，大多数用户倾向于使用默认设置，所以在玩家加载游戏的时候，不要在屏幕上放置一个虚拟的游戏杆，并在屏幕上放置一些其他的基于点击的控件（这里只给出一个任意的例子）游戏的第一次是我和其他游戏devise师可能会喜欢的。所以恕我直言，这超出了厚厚的手指/指导方针的讨论，只是苹果和所有其他供应商应该做的事情：让我们唯一识别您的设备，思考不同，而不是遵循指导方针。

使用JQuery和Jquery-svg拖动SVG: 我有一个HTML 5页面，我加载了一个svg圈子。当我点击圈子时，我点击了另一个小圈子。我想能够拖动第二个圆，但似乎不能用jquery-ui .draggable（）; 我可以通过访问它的cx和cy属性来移动这个圆，所以必须有一种方法来拖动它。 <!DOCTYPE HTML> <html > <head> <title></title> <link href="css/reset.css" rel="stylesheet" type="text/css"> <link href="css/layout.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="js/jquery.js" type="text/javascript" ></script> <script src="js/jquerysvg/jquery.svg.js" type="text/javascript" ></script> <script src="js/jquery-ui.js" type="text/javascript" ></script> <script type="text/javascript" > jQuery(document).ready(function(){ $('#target').svg({onLoad: drawInitial}); $('circle').click(function(e){ drawShape(e); var shape = this.id; }); $('.drag').mousedown(function(e){ var shape = this.id; this.setAttribute("cx", […]