个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我想将所有 SVG 图标组合到一个 sprite 中，并像我们在其他背景图像情况下那样从 CSS 调用它。但它没有显示在页面中。在浏览器中打开 SVG 图像时出现此错误 http://gyazo.com/814ab252f2c104caf10fcef2d2f1d057
HTML
<div class="col-md-12 col-xs-12 input-group">
<span class="input-group-addon login-icon icon-banner">
<i class="icons icon-username"></i>
</span>
</div>
CSS
.icons{
height: 20px;
width: 20px;
display: inline-block;
background:url('../images/icons/icons.svg') no-repeat;
}
这是 SVG 图片 http://gyazo.com/25f8140160e3cb27b850a9b2916492f3
SVG 标记是
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="126.099px" height="93.106px" viewBox="0 0 126.099 93.106" enable-background="new 0 0 126.099 93.106"
xml:space="preserve">
<g id="Page-1" sketch:type="MSPage">
<g id="Icons" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username" sketch:type="MSShapeGroup" fill="#F16059" d="M254.34,387.458c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C260.741,388.538,255.173,389.595,254.34,387.458"/>
</g>
</g>
<g id="Page-1_1_" sketch:type="MSPage">
<g id="Icons_1_" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username_1_" sketch:type="MSShapeGroup" fill="#C8C7C7" d="M203.34,387.458c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C209.741,388.538,204.173,389.595,203.34,387.458"/>
</g>
</g>
<g id="Page-1_2_" sketch:type="MSPage">
<g id="Icons_2_" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username_2_" sketch:type="MSShapeGroup" fill="#37424E" d="M229.007,387.459c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C235.408,388.539,229.84,389.597,229.007,387.459"/>
</g>
</g>
<g id="Page-1_3_" sketch:type="MSPage">
<g id="Icons_3_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password" sketch:type="MSShapeGroup" fill="#C8C7C7" d="M208.975,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C209.5,444.447,209.265,444.215,208.975,444.215
L208.975,444.215z M203.819,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402c0.783,0,1.418,0.628,1.418,1.402
C204.418,449.473,204.181,449.891,203.819,450.145L203.819,450.145z M205.653,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624c1.463,0,2.653,1.177,2.653,2.624V444.215L205.653,444.215z"/>
</g>
</g>
<g id="Page-1_4_" sketch:type="MSPage">
<g id="Icons_4_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password_1_" sketch:type="MSShapeGroup" fill="#37424E" d="M234.642,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C235.167,444.448,234.932,444.215,234.642,444.215
L234.642,444.215z M229.486,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402s1.418,0.628,1.418,1.402
C230.085,449.473,229.848,449.891,229.486,450.145L229.486,450.145z M231.32,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624s2.653,1.177,2.653,2.624V444.215L231.32,444.215z"/>
</g>
</g>
<g id="Page-1_5_" sketch:type="MSPage">
<g id="Icons_5_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password_2_" sketch:type="MSShapeGroup" fill="#F16059" d="M259.975,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C260.5,444.448,260.265,444.215,259.975,444.215
L259.975,444.215z M254.819,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402c0.783,0,1.418,0.628,1.418,1.402
C255.418,449.473,255.181,449.891,254.819,450.145L254.819,450.145z M256.653,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624c1.463,0,2.653,1.177,2.653,2.624V444.215L256.653,444.215z"/>
</g>
</g>
</svg>
有人可以帮忙吗？
最佳答案
尝试删除整个 svg 代码中显示 sketch:type="..." 的任何属性。
关于CSS:SVG Sprite 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28946417/
26
4
0
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
有两个 SVG 元素( SVG1 和 SVG2 )，其中 SVG1 是一个包含各种元素的大区域，会不时添加、删除和重新定位。另一方面，SVG2 需要用作 图标化表示(小) SVG1 的版本，非常小，但
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。 但是，这种方法似乎不适用
我正在尝试使用 Flutter SVG 依赖项，我将 svg 放入 Assets 中，在 pubspec.yaml 中设置，并在我的小部件中设置，但是，使用黑色容器加载 svg 我已经尝试过更改 sv
为什么这样的演示:http://jsbin.com/ejorus/2/edit，将元素嵌套在另一个元素内？ JS
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形 每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
我试图将 play svg 居中放置在 SVG 圆圈的中间，但似乎不知道该怎么做。 垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
是否可以使用一个 SVG 形状作为另一个形状的填充？ 最佳答案 您想使用 SVG Pattern .见 this example : 注意
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
我使用 require 的 SVG 没有显示。 在我的终端中，svg Assets 被发出并且路径在我的 html 中正确设置。 但是，SVG 不会显示，而其他格式(如 jpg 或 png)可以显示
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径，我想用公式组合它们:(1*2) + (3*4)，即路径 1 和路径 2 应该使用乘法模式混合，类似地路径 3 和路径 4 应该使用混合相
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试，我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成，
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。 问题是什么？为什么
使用联合 js 在 svg 中创建了一个文本区域。但是，我无法在文本区域中输入任何文本。如何使文本区域可编辑？ 代码: var graph = new joint.dia.Graph;
您可以不受限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。 也许我应该用一个例子来澄清；拿这个动画: 如果我停止此动画，并开始影响同一对象旋转的不同动画(
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中)，在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异？ 我正在考虑将某种动画从一张图片变成一张完全不同
logo的turtlegraphics的svg路径中是否有等价物？ 而不是硬编码的 x 和 y 坐标，这也迫使我在移动更相对的“增量”方法时调整控制点。 我的解决方案应该适用于 FOCS(Firefo
目前正在使用 SVG 元素与一堆 元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题，但没有任何效果。这是一个带有针迹的圆圈的代码:
我是一名优秀的程序员,十分优秀！