相关疑难解决方法(0)
CSS三角形如何工作？
在CSS Tricks上有很多不同的CSS形状- CSS的形状,我特别对三角形感到困惑:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}<div id="triangle-up"></div>它是如何以及为什么有效？
推荐指数
解决办法
查看次数
SVG中心文字圈
我正试图用svg将文本放在一个圆圈中心.
文本的大小将是动态的.
谢谢你的Avi
我的代码:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">
<g id="UrTavla">
<circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">
</circle>
<text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em"> Look, I’m centered!Look, I’m centered! </text>
</g>
</svg>
推荐指数
解决办法
查看次数
如何在HTML中使用外部SVG？
我尝试制作一个引用SVG文件的HTML,该SVG文件是交互式的(CSS悬停):
如果我使用
<img src="algerie.svg">我松散的交互性.
如果我使用开发工具在新选项卡中打开此图像,它将变为交互式.
如果我使用:
Run Code Online (Sandbox Code Playgroud)<svg viewBox="0 0 512 512"> <use xlink:href="algerie.svg"></use> </svg>然后没有显示任何内容,更糟糕的是,Chrome或Firefox不会在网络开发工具中检测到该文件.
推荐指数
解决办法
查看次数
HTML iframe可以继承css和javascript数据吗？
我想知道HTML iframe是否可以从父级继承CSS数据:
main.html中
<html>
<head>
<style>
.highlight{
background: #008fcc;
}
</style>
</head>
<body>
<iframe src='frame.html'></iframe>
</body>
</html>
frame.html
hello <font class='highlight'>
推荐指数
解决办法
查看次数
用于在旧浏览器中显示PNG代替SVG的条件代码？
我正在寻找一种方法让旧版浏览器在检测到时显示PNG图像代替SVG作为后备.我的网站的徽标目前在SVG中,但较旧的浏览器,特别是IE 8及更低版本的浏览器不会呈现它.我已经在PNG中拥有徽标.执行此操作的最佳方法是什么？
谢谢
推荐指数
解决办法
查看次数
内部图像的Svg没有在safari中显示
在我的网站内,我正在嵌入一些svgs.它们似乎在Chrome,Firefox,IE(9+)和Safari中都运行良好.一旦svg中包含图像,safari就不会渲染图像.
基于之前的类似主题,我尝试了以下内容:
<use>
像这样的标签 <use></use>
SVG图像不会出现在Safari中 - 我没有发现这非常有用,因为这是删除svg的aprt.
无法在Safari中渲染SVG图像 - 已添加
<meta http-equiv="Content-Type" content="application/xhtml+xml"> 在标题中.
除此之外,我真的不知道还有什么可以尝试.也许还有一点需要注意的是,在我的页面中,图像没有显示,但我可以在safari中打开svg文件(只是文件),它将被正确渲染.此外,在浏览器中将其作为文件打开后,它也会在页面内部呈现.我将svg嵌入到带有img标签的页面中.
<img src="mysvg.svg" class="center-block"/>
这是我的svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, 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="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
<defs>
<polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414 "/>
</defs>
<clipPath id="SVGID_2_"> …推荐指数
解决办法
查看次数
如何在我的 HTML 中链接 .svg 文件？
我有一个 .svg 文件，里面有一些代码。
如果我只是将该代码与<svg>标签一起放在我的 HTML 中，它就可以正常工作。
问题是我的 .svg 中有很多代码，我不想把所有这些代码都放在我的 HTML 中。所以我制作了一个 .svg 文件并尝试链接它，但它似乎没有链接。
有谁知道我应该如何将 .svg 文件链接到 HTML 文件？
推荐指数
解决办法
查看次数
我可以包含外部SVG defs
我创建了以下SVG图标:
<svg width="32" height="32" viewBox="0 0 32 32">
<defs>
<g id="chat">
<path d="M29.75 0.398h-27.5c-1.036 0-1.875 0.839-1.875 1.875v18.344c0 1.036 0.839 1.875 1.875 1.875h17.626l-0.032-2.813h-15.313c-1.036 0-1.875-0.839-1.875-1.875v-13.375c0-1.036 0.839-1.875 1.875-1.875h22.938c1.036 0 1.875 0.839 1.875 1.875v13.375c0 1.036-0.839 1.875-1.875 1.875h-4.764l-1.432 2.813h8.477c1.036 0 1.875-0.839 1.875-1.875v-18.344c0-1.036-0.839-1.875-1.875-1.875z"/>
<path d="M19.906 25.177l-0.032-2.867-1.321-0.002 0.103 9.169 4.664-9.162-1.955-0.003z"/>
<path d="M19.594 6.945c0 0.656-0.532 1.188-1.188 1.188h-11.063c-0.656 0-1.188-0.532-1.188-1.188v0c0-0.656 0.532-1.188 1.188-1.188h11.063c0.656 0 1.188 0.532 1.188 1.188v0z"/>
<path d="M25 6.945c0 0.656-0.532 1.188-1.188 1.188h-1c-0.656 0-1.188-0.532-1.188-1.188v0c0-0.656 0.532-1.188 1.188-1.188h1c0.656 0 1.188 0.532 1.188 1.188v0z"/>
</g>
<g id="search">
<path d="M20.337 0c-6.303 0-11.432 5.13-11.432 11.432 …推荐指数
解决办法
查看次数
在Chrome中打开无法使用Google Web字体呈现
我注意到从Chrome到Safari/Firefox的Open Sans(谷歌网络字体)的重新发送存在显着差异.我附上两张照片,第一张是铬和第二张狩猎.
我在样式表中的所有内容是:
font-family: 'Open Sans', sans-serif;
font-size:14px;
希望你能提供帮助,因为我非常喜欢chrome(第一张图片)渲染,但又讨厌另一张!!
推荐指数
解决办法
查看次数
css svg和vector-effect ="非缩放中风"浏览器兼容性
从各种来源我收集到svg中的vector-effect ="non-scaling-stroke"应该适用于当前版本的Opera,Firefox和Chrome.(不确定IE10).
但是我只能在Opera和Firefox中使用它,然后只有当它作为图像直接嵌入时,如果它在CSS中被缩放为背景图像,那么它就不起作用.
我的问题:
为什么不镀铬？
为什么不在背景图片？
有没有一种标准方法可以在所有最新的浏览器中使用它？
HTML:
<div><img src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div><img id="one" src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div id="two"></div>
<div id="three"></div>
CSS:
#one {
width: 200px;
height: 200px;
}
#two {
background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
height: 100px; /* native size */
width: 100px;
background-size: contain;
}
#three {
background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
height: 200px;
width: 200px;
background-size: cover;
}
推荐指数
解决办法
查看次数