Questions tagged «svg»

我应该使用<img>，<object>或<embed>用于加载SVG文件插入到页面的方式类似于加载jpg，gif还是png？ 每个代码分别是什么以确保其正常工作？（在我的研究中，我看到了关于包含模仿类型或指向后备SVG渲染器的参考，但是没有看到一个很好的最新参考）。 假设我正在用Modernizr检查SVG支持，然后退回（可能是用一个普通<img>标签进行替换）不支持SVG的浏览器。

603 html  svg  vector-graphics 

建立网站或界面等时应何时使用某些图像文件类型？ 他们的优点和缺点是什么？ 我知道PNG和GIF无损，而JPEG有损。 但是PNG和GIF之间的主要区别是什么？ 为什么我要一个比另一个更好？什么是SVG？何时使用？ 如果您不关心每个像素，是否应该始终使用JPEG，因为它是“最轻”的像素？

575 image  svg  png  jpeg  gif 

即时创建元素并能够移动元素的最佳方法是什么？例如，假设我要创建一个矩形，圆形和多边形，然后选择这些对象并四处移动。 我了解HTML5提供了三个使之成为可能的元素：svg，canvas和div。对于我想做什么，这些元素中的哪一个将提供最佳性能？ 为了比较这些方法，我正在考虑创建三个视觉上相同的网页，每个网页中都有页眉，页脚，小部件和文本内容。第一页中的小部件将完全使用canvas元素创建，第二页中的完全使用svg元素创建，而第三页中的使用简单div元素HTML和CSS创建。

476 javascript  html  svg  html5-canvas 

Наэтотвопросестьответына 堆栈溢出нарусском 这是我想出的一小段代码的自我问答。 当前，没有一种简单的方法可以嵌入SVG图像，然后可以通过CSS访问SVG元素。有多种使用JS SVG框架的方法，但是如果您要做的只是制作带有过渡状态的简单图标，它们将过于复杂。 这就是我想出的，我认为这是迄今为止在网站上使用SVG文件的最简单方法。它的概念来自早期的文本到图像替换方法，但据我所知，从未对SVG进行过处理。 这是问题： 如何在不使用JS-SVG框架的情况下在SVG中嵌入SVG并更改其颜色？

437 jquery  css  svg 

是否可以在SVG填充颜色上设置透明度或Alpha级别？ 我尝试将两个值添加到fill标签（将其从更改fill="#044B94"为fill="#044B9466"），但这不起作用。

416 colors  svg  transparency  alpha  fill 

我有一个已定义大小为16x16的SVG文件。当我使用ImageMagick的convert程序将其转换为PNG时，我得到的16x16像素PNG太小了： convert test.svg test.png 我需要指定输出PNG的像素大小。-size参数似乎被忽略，-scale参数在转换为PNG 后会缩放PNG。到目前为止，我使用-density参数获得了最好的结果： convert -density 1200 test.svg test.png 但是我不满意，因为我想以像素为单位指定输出大小，而不用做数学运算来计算密度值。所以我想做这样的事情： convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png 那么我在这里必须使用的魔术参数是什么？

388 svg  imagemagick  png 

是否可以使用css3为svg元素设置阴影，类似 box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; 我看到了有关使用滤镜效果创建阴影的一些评论。有没有单独使用css的示例。下面是正确使用cusor样式但没有阴影效果的工作代码。请帮助我以最少的代码获得阴影效果。 svg .shadow { cursor:crosshair; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888; } <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70"> <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" /> </svg> …

378 html  css  svg  svg-filters 

Apple的iPad Mini在更多方面比我们想要的要小一些，是iPad 2的较小版本。在JavaScript中，该window.navigator对象为Mini和iPad 2公开了相同的值。到目前为止，我发现该差异的测试并未成功。 为什么这很重要？ 由于iPad Mini和iPad 2屏幕的像素相同，但实际尺寸（英寸/厘米）不同，因此它们的PPI（每英寸像素）也不同。 为了使Web应用程序和游戏提供友好的用户界面，相对于用户的拇指或手指位置调整了某些元素的大小，因此，我们可能希望缩放某些图像或按钮以提供更好的用户体验。 到目前为止，我已经尝试过的事情（包括一些非常明显的方法）： window.devicepixelratio CSS元素宽度（以厘米为单位） CSS媒体查询（例如resolution和-webkit-device-pixel-ratio） SVG图纸以相似单位 在设定的时间内执行各种CSS Webkit转换，并使用来计数渲染的帧requestAnimFrame（我希望能够检测到可测量的差异） 我没有主意。你呢？ 更新 感谢您到目前为止的答复。我想评论一下有人投票反对将iPad mini对比2来投票，因为Apple认为这是一项统治所有人的准则。好的，这就是我的理由，为什么我觉得知道一个人使用的是iPad mini还是iPad 2确实很有意义。 iPad mini不仅是小得多的设备（9.7英寸对7.9英寸），而且其外形尺寸允许不同的用途。除非您是Chuck Norris，否则在玩游戏时，通常会用两只手握住iPad 2 。迷你游戏机较小，但也更轻巧，可以玩游戏，您可以一只手握住它，而另一只手则可以滑动或轻按。作为我自己的游戏设计师和开发人员，我只想知道它是否是迷你游戏，因此我可以根据需要选择为玩家提供不同的控制方案（例如，在对一组玩家进行A / B测试之后）。 为什么？事实证明，大多数用户倾向于使用默认设置，因此当播放器加载游戏时，忽略虚拟指尖并在屏幕上放置一些其他基于轻击的控件（此处仅提供任意示例）。比赛的第一次是我，恐怕其他游戏设计师，很想能够做到。 因此，恕我直言，这超出了冗长的讨论/准则的讨论，而这仅仅是Apple和所有其他供应商应做的事情：允许我们唯一地标识您的设备并考虑不同的想法，而不是遵循准则。

376 javascript  html  ipad  svg 

html <img src="logo.svg" alt="Logo" class="logo-img"> 的CSS .logo-img path { fill: #000; } 上面的svg加载并且是本地的，fill: #fff但是当我使用上面的svg css尝试将其更改为黑色时，它并没有改变，这是我第一次使用SVG，我不确定为什么它不起作用。

373 css  image  svg 

我想使用这项技术http://css-tricks.com/svg-fallbacks/并更改svg颜色，但到目前为止我还没有做到这一点。我把它放在css中，但是无论如何我的图像总是黑色的。我的代码： .change-my-color { fill: green; } <svg> <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" /> </svg> 运行代码段隐藏结果展开摘要

344 css  svg 

我想通过JavaScript将SVG转换为位图图像（如JPEG，PNG等）。

299 javascript  svg 

我正在使用jQuery SVG。我无法向对象添加或删除类。有人知道我的错误吗？ SVG： <rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" /> 不会添加该类的jQuery： $(".jimmy").click(function() { $(this).addClass("clicked"); }); 我知道SVG和jQuery可以正常工作，因为我可以定位对象并在单击对象时发出警报： $(".jimmy").click(function() { alert('Handler for .click() called.'); });

288 javascript  jquery  css  svg  jquery-svg 

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

283 css  svg 

将SVG输出直接与页面代码内联放置，我可以像这样简单地用CSS修改填充颜色： polygon.mystar { fill: blue; }​ circle.mycircle { fill: green; } 这很好用，但是我正在寻找一种方法，当它用作Background-IMAGE时，修改SVG的“填充”属性。 html { background-image: url(../img/bg.svg); } 现在如何更改颜色？可能吗 作为参考，这是我的外部SVG文件的内容： <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 …

270 html  css  svg 

已关闭。这个问题需要更加集中。它当前不接受答案。 4年前关闭。 已锁定。该问题及其答案被锁定，因为该问题是题外话，但具有历史意义。它目前不接受新的答案或互动。 如何将PNG图像转换为SVG？

266 svg  png