<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<object id="oo" data="Dynamic_grouping.svg" style="position:fixed;width: 900px;height:750px;bottom: -220px;right: 180px;">
</object>
</body>
<script type="text/javascript">
var far=document.getElementById("oo")
far.addEventListener("load", function (){
var svgDoc=far.contentDocument;
var svgRoot=svgDoc.documentElement;
document.getElementById("bar").onclick=function(){
var g = svgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttribute('id', 'group');
g.setAttribute('shape-rendering', 'inherit');
g.setAttribute('pointer-events', 'all');
var use = svgDoc.createElementNS("http://www.w3.org/2000/svg", "use")
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")
use.setAttributeNS(null,"id", "u")
svgRoot.appendChild(use)
var create_bar=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect")
create_bar.setAttribute("id", "r_bar")
create_bar.setAttribute("fill", "cream")
create_bar.setAttribute("x", "300px")
create_bar.setAttribute("y", "50px")
create_bar.setAttribute("width", "100px")
create_bar.setAttribute("height", "30px")
create_bar.setAttribute("pointer-events", "inherit")
g.appendChild(create_bar)
var cir = svgDoc.createElementNS("http://www.w3.org/2000/svg", "circle");
cir.setAttribute( "id","cir")
cir.setAttribute( "cx","320px") …我尝试使用svg作为背景,它在本地工作但不是我上传到ftp时.
对于IE和其他不支持svg的人来说,它有一个png后备.但在所有情况下,我只看到了png.
(仅为示例使用红色方块为svg和一个非常不同的认为skype.png的徽标为后退):http: //jsfiddle.net/snG8w/ http://codepen.io/pen/9135/2
如何在这个背景下放一个svg？
HTML:
<div id="quadrat"></div>?
CSS:
#quadrat {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 400px;
line-height:200px;
background-image: url('http://mig-marketing.com/proves/retina/skype.png');
background-image: none,url('http://mig-marketing.com/proves/retina/rectangle.svg'), url('http://mig-marketing.com/proves/retina/skype.png');
background-size: 100% 100%;
background-repeat:no-repeat;
}?
这（不）正是我想要得到的：
https://i.stack.imgur.com/nMbtl.png
我的代码：
Run Code Online (Sandbox Code Playgroud)<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300"> <circle class="circle_shadow" cx="50%" cy="50%" r="6.6%" fill="#333333" /> <circle class="circle_shadow" cx="50%" cy="50%" r="11%" fill="none" stroke="#333333" stroke-width="7%" /> <circle class="circle_shadow" cx="50%" cy="50%" r="19%" fill="none" stroke="#333333" stroke-width="7%" /> <circle class="circle_shadow" cx="50%" cy="50%" r="27%" fill="none" stroke="#333333" stroke-width="7%" /> <circle class="circle_shadow" cx="50%" cy="50%" r="35%" fill="none" stroke="#333333" stroke-width="7%" /> </svg>
可以用CSS改变SVG矩形的宽度吗？
这不起作用:
#red {
width: 800px;
}
#red:hover {
width: 1600px;
}
见jsfiddle.