- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个在 SVG 中构建的 javascript 应用程序(类似 CAD),它具有插入了 use
标签的 tools
(使用 Inkscape 在 SVG 中构建的对象)。在 Chrome 和 Safari 上一切正常(从未在 IE 中测试过),但在 Firefox 中,所有用渐变填充
的对象都没有呈现。如下图所示:
工具
是这样加载的(使用外部文件)
<use
id="SvgjsUse1448"
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="assets/images/neomap/tools/armchair.svg#armchair">
</use>
渐变在 html
页面内的单独 svg
中定义
...
<linearGradient xmlns="http://www.w3.org/2000/svg" id="armchair_SVGID_1_" y2="1911.6" gradientUnits="userSpaceOnUse" x2="1201.2" gradientTransform="matrix(1.0799475,0,0,1.2039969,15.269894,2.997636)" y1="467.91" x1="1201.7">
然后像这样申请
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" height="100%" width="100%" version="1.1" >
<defs>
<symbol id="armchair" viewBox="0 0 72000 54000">
<path style="stroke:#000000;stroke-width:6.84171867;stroke-miterlimit:10;fill:url(#armchair_SVGID_1_);" d="m2234.8,743.7s168.9,1406.4,0,1487.4c-188.77,90.42-1655.6,92.708-1844.3-0.4817-168.8-83.316,0-1488.9,0-1488.9v-182.09h1841l3.2398,184.09z"/>
...
</symbol>
</defs>
</svg>
这是 Firefox 上的错误?我该如何解决?
最佳答案
我有一个类似的问题,结果证明我的是一个真正的边缘案例,所以为了其他人的利益,我在这里发布我的解决方案。
我的目标是定义一组图标供以后在文档中重复使用。我已将图标定义为 defs
元素内的嵌套 svg 文档:
<svg id="icons">
<defs>
<g id="atom-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<defs>
<linearGradient id="atom-41-a" x1="50%" x2="50%" y1="3.961%" y2="100%">
<stop offset="0%" stop-color="#FDFDFD"/>
<stop offset="100%" stop-color="#CBCBCB"/>
</linearGradient>
<linearGradient id="atom-41-b" x1="50%" x2="50%" y1="3.961%" y2="100%">
<stop offset="0%" stop-color="#B2E198"/>
<stop offset="100%" stop-color="#04A171"/>
</linearGradient>
</defs>
<g fill="none">
<circle cx="128" cy="128" r="127.858" fill="url(#atom-41-a)"/>
<circle cx="127.858" cy="128.142" r="116.907" fill="url(#atom-41-b)"/>
<path fill="#F2F8F6" d="M100.453 110.097a221.783 221.783 0 0 0-3.988 6.382 164.44 164.44 0 0 1-3.684-11.377c3.73-.535 7.695-.957 11.874-1.249a224.886 224.886 0 0 0-4.202 6.244zm103.138 7.475c-4.132-3.967-10.04-7.602-17.558-10.804-14.926-6.356-34.918-10.474-56.295-11.595a234.82 234.82 0 0 0-7.529-.277C138.53 75.415 154.292 65.05 163.472 64.7c1.944-.074 3.576.31 4.854 1.141 4.296 2.792 5.488 11.453 3.189 23.166a4.267 4.267 0 0 0 8.373 1.644c3.953-20.137-1.576-28.497-6.911-31.965-2.785-1.81-6.093-2.655-9.83-2.513-14.12.536-33.904 15.592-51.956 38.803-7.148.247-14.038.864-20.483 1.827a106.106 106.106 0 0 1-1.625-9.522c-1.619-13.344.367-22.816 5.312-25.337.794-.405 1.662-.639 2.654-.713 4.418-.332 10.652 2.637 17.542 8.359a4.267 4.267 0 0 0 5.452-6.565c-8.85-7.35-16.8-10.817-23.633-10.303-2.112.158-4.095.703-5.892 1.62-4.593 2.342-7.732 6.828-9.33 13.331-1.368 5.57-1.562 12.513-.576 20.636.39 3.213.96 6.556 1.695 9.998-5.04 1.062-9.71 2.356-13.897 3.869-18.316 6.616-22.544 15.337-22.866 21.488-.308 5.876 2.7 14.62 18.775 22.91a4.267 4.267 0 0 0 3.911-7.583c-9.247-4.77-14.41-10.193-14.165-14.88.346-6.605 11.417-13.596 30.274-17.535 1.747 6.309 3.99 12.861 6.68 19.505-6.777 12.723-11.722 25.262-14.286 36.416-1.833 7.97-2.369 14.89-1.592 20.567.906 6.63 3.558 11.418 7.881 14.228 2.205 1.433 5.176 2.553 9.079 2.553 5.658 0 13.275-2.357 23.343-9.538a4.267 4.267 0 1 0-4.955-6.948c-9.925 7.08-18.454 9.613-22.816 6.778-4.652-3.023-5.633-12.642-2.624-25.728 1.995-8.678 5.555-18.296 10.383-28.21a220.995 220.995 0 0 0 3.283 6.731c9.717 19.087 21.612 35.694 33.494 46.762 5.984 5.573 11.708 9.497 17.011 11.663 3.218 1.314 6.24 1.971 9.045 1.971 2.596 0 5.008-.563 7.216-1.69 4.43-2.259 7.511-6.52 9.157-12.665 1.41-5.263 1.726-11.827.942-19.512-1.543-15.11-7.253-33.539-16.077-51.891a4.267 4.267 0 0 0-7.69 3.697c8.407 17.485 13.833 34.908 15.278 49.06 1.27 12.447-.78 21.31-5.486 23.71-4.942 2.52-13.756-1.438-23.58-10.588-11.17-10.404-22.43-26.168-31.706-44.388a210.555 210.555 0 0 1-5.851-12.483 210.936 210.936 0 0 1 7.143-11.836 213.301 213.301 0 0 1 7.877-11.333c.7-.01 1.405-.017 2.115-.019 3.664-.012 7.592.09 11.688.305 20.404 1.07 39.368 4.95 53.399 10.925 12.34 5.256 19.534 11.704 19.244 17.25-.246 4.708-5.967 9.575-15.696 13.352a4.267 4.267 0 0 0 3.088 7.955c16.905-6.563 20.821-14.967 21.13-20.861.27-5.151-2.04-10.111-6.865-14.743v.001z"/>
<path fill="#F1F8F3" d="M119.194 129.133c0 5.153 4.174 9.33 9.323 9.33s9.323-4.177 9.323-9.33c0-5.154-4.174-9.331-9.323-9.331s-9.323 4.177-9.323 9.33"/>
</g>
</svg>
</g>
</defs>
</svg>
我在文档的其他地方使用过,如下所示:
<li title="Atom">
<svg><use xlink:href="#atom-icon"/></svg>
</li>
为了防止在屏幕上呈现大量图标引用,我应用了以下样式:
#icons {
display: none;
}
这导致对 linearGradients 的 url 引用停止工作。可能浏览器将它们从 DOM 树中删除是因为显示:无或类似的效果。
解决方案是更改样式:
#icons {
height: 0;
}
关于firefox - SVG 使用标签不渲染渐变 Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34363766/
我使用 jQuery 已经有一段时间了,但我不知道如何从一个渐变渐变到另一个渐变。我一直在用 http://www.colorzilla.com/gradient-editor/对于我的渐变。例如 b
为了使用 jni 帮助程序库运行测试,我将这样的代码添加到 build.gradle 中: def jniLibDir = "xxx" tasks.withType(Test) { syste
我正在从命令行运行 wsimport 以从 WSDL 生成 java 类,如下所示。 wsimport -J-Djavax.xml.accessExternalDTD=all -J-
我们有一个重复使用第3方 war 的项目(如果有人要求,则为shindig-server-2.0.2.war :)。这场 war 目前位于项目根目录中,当前的ant任务将其解压缩到temp文件夹中,进
我有一个边界框,其坐标由(x,y,w,h)给出,其中x和y是框的左上角坐标。我想在盒子外面应用模糊或渐变。如何使用上面的坐标创建蒙版,并使用类似于下图的PIL或cv2在蒙版之外应用此效果? 最佳答案
考虑情况http://codepen.io/anon/pen/JdGYBN 我需要在拖动元素时动态更改卡片“可拖动”的背景颜色。 但是卡片的背景应该根据线条的渐变颜色而变化。 background:
我现在有这种情况:JSFIDDLE 我想实现这种效果,但我希望文本可以在渐变后面选择,并且即使我将鼠标放在文本上也可以滚动文本。 是否有任何解决方法可以使用 javascript 来改变滚动时文本的不
这段代码是我从css graident generator得到的,渐变底部是透明的 background: -moz-linear-gradient(top, rgba(248,246,247,1)
我必须使用 CSS 完成以下图像: 这是一张包含主导航的图像。所以我为此写了一些 CSS(我知道不是正确的颜色代码): #menu-block { background: #730868; b
是否可以使用渐变作为渐变中的一种颜色? 为了我的特定目的,我有一个从左到右的初始渐变: linear-gradient(to right, red, darkgray); 但我希望深灰色部分实际上是从
我这辈子都想不通为什么 transition 属性在我的 CSS 中不起作用。这是代码: #header #menu-top-nav ul li a { -webkit-transition:
我一直在寻找像下图中那样的多组件日期选择器,但在 Github 或其他地方找不到任何东西。 所以我决定做一个。我在实现 CSS 时遇到问题,它在顶部和底部淡出。 我想过在容器中使用:before和:a
我正在寻找与下图等效的 css。我正在使用多个停止点,但很难获得硬停止点 solid 2px white 边框。如果我添加它,它看起来像是一个渐变而不是硬边。任何帮助都会很棒,谢谢! .stripes
我的广告部门给了我一些图像,将其放在网站上的选项卡等。但是我确信这会减慢页面的呈现速度。所以我想我会用 css 来做。然而,经过几次试验,我无法接近以下图像。对于这两张图片,我将不胜感激。 请删除这个
我试图在将鼠标悬停在 div (id="above") 上时更改 body 的背景图像/渐变,我按照他们在另一篇文章 (http://stackoverflow.com/questions/14623
我正在测试所有浏览器的渐变兼容性,我发现渐变在 FireFox 上有不同的效果。请允许我演示测试。 代码 body{
当我使用渐变时,当内容很少时,渐变会重复出现,我该如何防止这种情况发生? http://jsfiddle.net/mcqpP/1/ 我可以尝试使用 html { height: 100%; },但是当
我有一个导航栏,它的背景颜色略深。我想要一个从中心到左右两侧的渐变,以便导航栏最右边和最左边的位达到背景颜色。这可能吗? -->
我在 Firefox 中使用了这个 CSS 线性渐变,但在 Safari 和其他浏览器中似乎无法获得相同的结果。它是联系字段的纸状背景。我试过整个 body 和一个特定的元素,这种风格似乎只适用于 F
我有这行代码 背景:线性渐变(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%); 如您所见,它一半是灰色一半是黑色。有没有办法让它的灰
我是一名优秀的程序员,十分优秀!