Tag: svg

填充水animation: 我正在试图清理animation，使其看起来像是在灌水。我遇到了两个错误，甚至没有能够解决第三个错误：它填满了错误的方式它填充后重置为空（黑色） * 现在，我正在使用<img>标记，但是我想将这个效果移到body { background-image: }并且需要一些方法来指导如何做到这一点。我到目前为止所尝试的： #banner { width: 300px; height: 300px; position: relative; } #banner div { position: absolute; } #banner div:nth-child(2) { -webkit-animation: wipe 6s; -webkit-animation-delay: 0s; -webkit-animation-direction: up; -webkit-mask-size: 300px 3000px; -webkit-mask-position: 300px 300px; -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, […]

如何添加一个工具提示到一个SVGgraphics？: 我有一系列的svg矩形（使用D3.js），我想在鼠标hover上显示一条消息，消息应该被作为背景的框包围。他们应该完全alignment到矩形（在顶部和居中）。做这个的最好方式是什么？我尝试使用“x”，“y”，“width”和“height”属性添加一个svg文本，然后添加一个svg矩形。问题是，文本的参考点是在中间（因为我希望它居中alignment我使用text-anchor: middle ），但对于矩形它是左上angular的坐标，再加上我想围绕文本的一点空白这使得它有点痛苦。另一个select是使用html div，这将是很好的，因为我可以直接添加文本和填充，但我不知道如何获得每个矩形的绝对坐标。有没有办法做到这一点？

.SVG浏览器支持: 我正在处理响应式devise，我正在考虑将导航图标创build为.svg文件。目前的浏览器支持是什么样的，是否有旧的浏览器版本的解决方法/插件？

如何使用html5和（canvas或svg）绘制网格: 我想绘制如图所示的网格，但我完全不知道我应该从哪里开始。我应该使用SVG还是应该使用HTML5的 Canvas以及如何绘制它。请在此指导。我想要这个网格绘制矩形，圆形或其他图上，我将计算该图的面积，如方形区域。

IE9-10中SVG的背景大小: 我有一个背景图像的div集： <div>Play Video</div> 用下面的CSS： div { background-image: url('icon.png'); background-image: url('icon.svg'), none; background-size: 40px 40px; background-repeat: no-repeat; background-position: 90% 50%; padding: 20px; width: 150px; } Firefox，Safari和Chrome支持背景大小。在IE8中，SVG被PNG文件取代。但是，在IE9和IE10中，SVG文件的尺寸大大减小。这个问题似乎与div的宽度和高度有关。如果我添加一个150像素的高度，SVG被正确渲染。如果我使它更小（即100px）graphics开始收缩。有没有人find一种方法来解决这个问题在资源pipe理器？有没有办法告诉IE独立于div的宽度和高度使用背景大小的值？

SVG使用标签和ReactJS: 所以通常包括我需要简单样式的大部分SVG图标，我都这样做： <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> 现在我一直在玩ReactJS，后来评估它作为我的新前端开发堆栈中的一个可能的组件，但是我注意到在支持的标签/属性列表中，既不支持use xlink:href也不支持。是否有可能使用svg sprites并以这种方式在ReactJS中加载它们？

在.NET / C＃中绘制SVG？: 我想用C＃生成一个SVG文件。我已经有代码来绘制他们在PNG和EMF格式（使用框架的标准类System.Drawing.Imaging.Metafile和ZedGraph ）。你可以推荐做些什么来使代码适应SVG？最好我想find一些库（免费或不会），将模仿System.Drawing.Graphics接口。

重叠的CSS 1个div的圈子: 我正在寻找在CSS中创build这个重叠的圆形状：基本上，只是堆积圈。我环顾四周，我看到的所有解决scheme包括使用多个div元素的效果。但是，这不能用一个单独的div，使用CSS3？我看着它是如何轻松完成的，并且认为，如果所有的颜色都一样的话，你会得到这样的药丸形状： http://jsfiddle.net/5wytm0r4/ #circles { background-color: red; width: 130px; height: 100px; border-radius: 50px; } <div id="circles"></div> 然后简单地画几个四分之一的卫星，你就完成了。但是，我无法弄清楚如何在我的胶囊形格中绘制这些月亮形状。

SVG文档是否支持自定义数据属性？: 在HTML5中，元素可以具有存储在名称以data-开头的XML属性中的任意元data- ，如<p data-myid="123456"> 。这也是SVG规范的一部分吗？实际上，这个技术在许多地方对SVG文档工作正常。但是，我想知道它是否是官方SVG规范的一部分，因为格式足够年轻，浏览器之间仍然存在很多不兼容问题，特别是在移动设备上。所以在提交代码之前，我想知道是否可以期待未来的浏览器能够支持这一点。我从工作组邮件列表中发现了这个消息，表示他们“期待他们”会支持它。这是否成为官方？

从Font Awesome中提取SVG: 我想从Font Awesome glyphs中获取SVGpath数据，这样我就可以直接在我的HTML中使用它们作为SVG。我认为这会像从fontawesome-webfont.svg复制粘贴path数据一样简单，但是当我在我的HTML中使用它时，符号都是上下颠倒的。任何人知道为什么（见小提琴）字体真棒SVG： <glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 […]