以上就是给各位分享css–在Firefox中使用带有剪辑路径的外部svg，其中也会对火狐浏览器css进行解释，同时本文还将给你拓展css–::之前在Firefox中输入、css–Firefox中未显示
以上就是给各位分享css – 在Firefox中使用带有剪辑路径的外部svg，其中也会对火狐浏览器css进行解释，同时本文还将给你拓展css – ::之前在Firefox中输入、css – Firefox中未显示SVG符号、css – firefox中的SVG背景、css – Firefox中的SVG过滤器转换等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：- css – 在Firefox中使用带有剪辑路径的外部svg（火狐浏览器css）
- css – ::之前在Firefox中输入
- css – Firefox中未显示SVG符号
- css – firefox中的SVG背景
- css – Firefox中的SVG过滤器转换
css – 在Firefox中使用带有剪辑路径的外部svg（火狐浏览器css）
我在外部文件中使用以下CSS：
.featured_event_panel{
background:url(../images/home/screen2.jpg) repeat;
background-position:center 50%;
-webkit-clip-path: polygon(0 100%,100% 100%,100% 0%,50% 10%,0 0);
clip-path: url('../images/ui/clippath.svg#diamond');
width:100%;
padding:100px 0 150px;
position:relative;
}
这不起作用.我可以让裁剪路径在FF中工作的唯一方法是将CSS规则放在文档的头部和文档中的SVG中. SVG如下：
<svg>
<defs>
<clipPath id="diamond" clipPathUnits="objectBoundingBox">
<polygon points="0 1,1 1,1 0,.5 .1,0 0" />
</clipPath>
</defs>
</svg>
SVG的路径是相对于样式表的,所以我不确定我在这里做错了什么.
有任何想法吗？干杯!
编辑：
示例：http://jsfiddle.net/25VQD/
解决方法
要修复它,您需要将SVG名称空间添加到根元素,即
<svg xmlns="http://www.w3.org/2000/svg">
css – ::之前在Firefox中输入
我正在尝试使用CSS伪类::之前在输入标记之前放置一些内容.它适用于Chrome,但不适用于Firefox. Firefox似乎有什么问题？
这是一个片段：
input::before {
content: '';
display: block;
width: 13px;
height: 13px;
border-radius: 50%;
Box-shadow: 0px 0px 5px #9F0002 inset;
}
<input type="radio" name="gender"https://www.jb51.cc/tag/dio/" target="_blank">dio" value="male">male <input type="radio" name="gender"https://www.jb51.cc/tag/dio/" target="_blank">dio" value="female">female
……这就是结果. Chrome工作得很好：
但Firefox没有变化：
解决方法
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate,the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property,in conjunction with these pseudo-elements,specifies what is inserted.
：before和：after应该只对可以充当内容容器的元素起作用. <输入>不能包含任何内容,因此它不应该支持那些伪元素. Chrome支持,因为它不符合规范(或错误？).
css – Firefox中未显示SVG符号
我正在使用以下标记加载index.html中的所有图标：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"https://www.jb51.cc/tag/dis/" target="_blank">display:none">
<symbol id="user" viewBox="0 0 64 64">
<path d="...">
</symbol>
</svg>
然后我在我的观点中使用这样的符号：
<svg ng->
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
</svg>
使用以下css：
.main-nav-icon {
height: 32px;
width: 32px;
cursor: pointer;
}
在Firefox中,svg标记最终在调试器中看起来像这样：
<svgng-><use xlink:href="#user"></use></svg>
但是没有显示任何东西(虽然间距是正确的意味着显示32px乘32px元素,但它只是空的).我需要做些什么来完成这项工作？
这就是我的html头像：
<!doctype html>
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,target-densityDpi=device-dpi">
<Meta name="apple-mobile-web-app-capable" content="yes" />
<Meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="/styles/vendor-app.css">
<base href="/">
</head>
更新了Jsfiddle演示问题
http://jsfiddle.net/r7ger34b/2/
在Chrome中打开链接,即会显示图标.
在Firefox中打开链接,不显示任何图标.
解决方法
<base href="/">
删除它将在Firefox中工作.
css – firefox中的SVG背景
http://lene.isreborn.com/
CSS – (我必须使用重要因为它是wordpress)：
header::after {
content:"";
display: block;
background: url(/svg-filer/header-background.svg);
background-size: contain;
background-repeat: no-repeat;
top: 0;
left:-1%;
width: 102% !important;
height: 90px !important;
position: absolute;
z-index: -1;
-ms-transition: top ease .5s;
-moz-transition: top ease .5s;
-webkit-transition: top ease .5s;
transition: top ease .5s;
}
header.sticky-active::after {
top: -20px;
}
SVG文件：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0,SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="90px" viewBox="0 0 1920 90" preserveAspectRatio="none">
<polygon id="XMLID_3_" fill="#FFFF00" points="1,99.7 1399.2,130 1921,99.7 1921,0 1,0 "/>
</svg>
解决方法
背景大小不适用于’包含’但100％100％,
看到
Mozilla Background rules
链接到开发者网站：See here
header::after {
content:"";
display: block;
background: url(/svg-filer/header-background.svg);
background-size: 100% 100% !important;
background-repeat: no-repeat;
top: 0;
left:-1%;
width: 102% !important;
height: 90px !important;
position: absolute;
z-index: -1;
-ms-transition: top ease .5s;
-moz-transition: top ease .5s;
-webkit-transition: top ease .5s;
transition: top ease .5s;
}
header.sticky-active::after {
top: -20px;
}
css – Firefox中的SVG过滤器转换
但转换在Firefox中不起作用.是否有可能只使用css在firefox中运行转换？
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray alpha(opacity=50); /* IE6-9 */
-webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
解决方法
在此期间,您可以使用SVG动画执行此操作,但不能仅通过CSS执行此操作.
我们今天的关于css – 在Firefox中使用带有剪辑路径的外部svg和火狐浏览器css的分享已经告一段落，感谢您的关注，如果您想了解更多关于css – ::之前在Firefox中输入、css – Firefox中未显示SVG符号、css – firefox中的SVG背景、css – Firefox中的SVG过滤器转换的相关信息，请在本站查询。
本文标签：
