关键词：
【中文标题】SVG 背景可以是交互式的吗？【英文标题】：Can an SVG background be interactive? 【发布时间】：2013-03-29 09:25:53 【问题描述】：我有一个我创建的 SVG 图像。它是一个长方形，里面有一个圆圈。圆圈使用 JavaScript 跟随用户鼠标。图片由以下代码表示：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlspace="preserve" preserveAspectRatio="xMidYMin slic">
<style>
* vector-effect:non-scaling-stroke
rect fill: blue;
circle fill:orange; opacity:0.75;
</style>
<rect cx="50%" cy="0" id="origin" />
<circle cx="50%" cy="116" r="72" id="dot" />
<script>
var svg = document.documentElement,
pt = svg.createSVGPoint(),
dot = document.querySelector('#dot');
svg.addEventListener('mousemove',function(evt)
var loc = cursorPoint(evt);
dot.setAttribute('cx',loc.x);
dot.setAttribute('cy',loc.y);
,false);
function rotateElement(el,originX,originY,towardsX,towardsY)
var degrees = Math.atan2(towardsY-originY,towardsX-originX)*180/Math.PI + 90;
el.setAttribute(
'transform',
'translate('+originX+','+originY+') translate('+(-originX)+','+(-originY)+')'
);
// Get point in global SVG space
function cursorPoint(evt)
pt.x = evt.clientX; pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
</script>
</svg>
我想用这张图片做的是把它用作 CSS 背景。如果我使用 CSS 将图像设置为背景 background: url("image.svg"); 那么 JavaScript 不再起作用，即圆圈不再跟随光标。我相信这是因为当图像是背景时，它上面会堆叠其他元素。
那么我怎样才能让图像成为背景并保持互动？任何建议将不胜感激。
【问题讨论】：
出于隐私原因在图像中禁用了Javascript，而不是因为其他元素堆叠在顶部。恐怕你做不到。 我完全同意@RobertLongson，您将无法做到这一点，但我建议的一种方法是，如果我理解您的问题，将 2 张图像制作成交互式图像，将其他图像设置在后台正确！ 如果它不是背景，我可以与图像进行交互。例如，如果我将 SVG 包含在img 标签或 object 标签中并绝对定位它，那么我可以与之交互。如果我更改 z-index 以使其他东西堆叠在该图像之上，我将无法再与它进行交互。
出于好奇，为什么需要它作为背景？
我想制作一个与 dabble.in 类似的交互式背景，但从编码的角度来看更简单。
【参考方案1】：
让脚本化背景 SVG 工作的方法之一是使用 CSS4 element()。它目前仅通过 -moz-element() 在 Firefox 4+ 中实现。
An example:
<div id="bg" style="width: 400px; height: 400px;">
<svg viewPort="0 0 400 400">
<!-- force correct 0,0 coordinates -->
<rect x="0" y="0" fill="transparent" />
<rect x="0" y="0" id="animable1" fill="blue" />
<rect x="0" y="0" id="animable2" fill="red" />
</svg>
</div>
<div id="target" style="border: 4px dashed black; height: 400px; width: 400px; background: gray -moz-element(#bg); background-size: 20%;"></div>
<script type="text/javascript">
var divTarget = document.getElementById("target");
var animable1 = document.getElementById("animable1");
var animable2 = document.getElementById("animable2");
document.addEventListener("mousemove", function(event)
var rotation = Math.atan2(event.clientY, event.clientX);
animable1.setAttribute("transform", "translate(140 140) rotate(" + (rotation / Math.PI * 360) + " 60 60)");
animable2.setAttribute("transform", "translate(170 170) rotate(" + (360 - rotation / Math.PI * 360) + " 30 30)");
, false);
animable1.setAttribute("transform", "translate(140 140) rotate(0 60 60)");
animable2.setAttribute("transform", "translate(170 170) rotate(0 30 30)");
</script>
【讨论】：
这很酷。我不能等到这成为现状的一部分。 你好！听说您喜欢 html，所以我们创建了element()，以便您可以将 html 放入您的 html 中。【参考方案2】：
你应该创建两个文件，一个是.css文件，另一个是.css文件当然最好有单独的文件，因为它实际上是html容器的一部分。此容器中的 SVG 是 JavaScript。这种分而治之的简化或事件。出于这个原因，外部文件实际上是作为 JavaScript 保存的。这是一种不会在代码中丢失的好方法。
SVG 定义：
<div><object id="circle-svg" type="image/svg+xml" data="moving_circle.svg"></object></div>
这里是你描述你自己的SVG的那部分数据
例如画布：
canvas = d3.select("#circle-svg")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
第 1 部分： 看看这段代码（基于html）
<head>
<title>Controlling an SVG with Javascript</title>
<script type='text/javascript' src='svg-interaction.js'></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
div.tooltip
position: absolute;
text-align: center;
z-index: 10;
width: 140px;
height: auto;
padding: 8px;
font: 24px sans-serif;
background: red;
color: white;
border: solid 1px #aaa;
border-radius: 8px;
opacity: 0;
</style>
<head>
<body>
<h2>Controlling SVG with Javascript</h2>
<div class="page-content">
<div><object id="circle-svg" type="image/svg+xml" data="moving_circle.svg"></object></div>
你可以在那里定义你的脚本
然后您继续第二阶段（您的 SVG 研究）
<svg viewBox="0 0 400 400" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
a3:scriptImplementation="Adobe"
onload="init(evt)"
onzoom="updateTracker(evt)"
onscroll="updateTracker(evt)"
onresize="updateTracker(evt)">
<script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
/*****
*
* Globals
*
*****/
var elems =
tracker: false,
cursor: false,
trans: true,
scale: true,
mx: true,
my: true,
ux: true,
uy: true
;
var frame =
x_trans: 0,
y_trans: 0,
zoom : 1,
x_scale: 1,
y_scale: 1
;
【讨论】：
是否可以使用 javascript 和/或 css 修改背景 svg 图像？
】是否可以使用javascript和/或css修改背景svg图像？【英文标题】：Isitpossibletomodifybackgroundsvgimageswithjavascriptandorcss?【发布时间】：2015-02-0223:56:27【问题描述】：就我而言，我有一个设置为重复x的背景图像。我想知道背景图像是否... 查看详情
svg交互动画制作
...为三种，CSS3动画，HTML动画（SVG动画），JS动画或者我们可以称之为Canvas动画这里主要我们是要讲解的是SVG动画的实现方法。 SVG动画的类型常见的SVG动画有三种实现方式第一种，通过原生的SVG来实现，但是这种方法的实现效... 查看详情
如何从此svg中删除背景
...将EPS转换为SVG。这是我正在处理的图形：我只想删除方格背景。当我在Gravit中打开这个SVG时，背景显示为路径。此图中有大量路径。有人可以建议如何使用像Gravit这样的SVG编辑器删除这个方格背景。谢谢。答案您需要使用以下图... 查看详情
你可以为 svg“背景图像”制作动画吗？
】你可以为svg“背景图像”制作动画吗？【英文标题】：Canyouanimateasvg"background-image"?【发布时间】：2017-06-1502:16:15【问题描述】：我想将svg图像水平和垂直居中以响应我的窗口。所以我决定将图像整合到一个div背景中。... 查看详情
如何制作拉伸而不是平铺的 SVG 背景？
】如何制作拉伸而不是平铺的SVG背景？【英文标题】：HowdoesonemakeaSVGbackgroundthatstretchesratherthantiles?【发布时间】：2012-07-2409:11:30【问题描述】：我有一个想要使用的SVG背景，但我不知道如何让它覆盖整个页面，更不用说成为背景... 查看详情
svg是啥文件格式
...，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。相关信息SVG图... 查看详情
如何在用作背景图像的外部 SVG 文件中设置路径元素的样式？
】如何在用作背景图像的外部SVG文件中设置路径元素的样式？【英文标题】：HowtostylepathelementinanexternalSVGfileusedasbackgroundimage?【发布时间】：2013-01-1000:44:54【问题描述】：我有一个div，在我的CSS中分配了一个背景图像。它是一个s... 查看详情
新媒体运营技能svg图文交互基础01
...纵坐标r半径fill是填充色stroke描边stroke-width描边宽度颜色可以有三种表达方式，例如红色怎么表示？①颜色英文例如：fill="red"②16进制例如：fill="#ff0000"③RGB例如：fill="rgb(255,0,0)"<rect>...</rect>绘出一个矩形，需要起始位置... 查看详情
如何获得旋转的线性渐变 svg 用作背景图像？
】如何获得旋转的线性渐变svg用作背景图像？【英文标题】：Howtogetarotatedlineargradientsvgforuseasabackgroundimage?【发布时间】：2012-02-1923:49:26【问题描述】：我已经看到了一些围绕这个问题的问题，所以我希望这不是太多余。理想情... 查看详情
用户交互性(动画)介绍及应用
...2.SVG能通过cursor良好的捕捉用户鼠标的移动。 3.用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。 4.用户可以很方便的把动画和事件结合起来，完成一些复杂的效果。 通过给SVG元素挂接事件，... 查看详情
如何将svg设置为背景图像[重复]
】如何将svg设置为背景图像[重复]【英文标题】：howtosetsvgasabackgroundimage[duplicate]【发布时间】：2014-04-0723:15:50【问题描述】：我是网络开发的新手。我试图做的是建立一个自适应网站。我决定为我的许多图像使用.svg。我的问题... 查看详情
canvas一段背景色鼠标移入后
...率的场景，小游戏，小特效，绘制图表、活动页面、炫酷背景SVG适用于矢量图，低数据量绘制频率的场景，如图形图表 查看详情
可以在 CSS 背景图像中使用 SVG <use xlink> 吗？
】可以在CSS背景图像中使用SVG<usexlink>吗？【英文标题】：CanSVG<usexlink>beusedinaCSSbackground-image?【发布时间】：2016-01-0505:19:05【问题描述】：这里我们可以看到SVGs可以用在CSS背景图片中。.iconbackground-image:url(\'data:image/svg+xml... 查看详情
怎么修改svg图中背景颜色？
怎么修改SVG图中背景颜色？指的是除了图形其他的区域的颜色怎么设置，好像一直都是白色的参考技术AsvgObj.style.fill='#ffcc00' 参考技术B修改fill属性 查看详情
在firebase中保存svg的最佳方法是啥？
...描述】：我有一个Android应用程序，我想在其中实现用户可以上传SVG的功能，然后将SVG保存在firebase实时数据库中，然后其他用户可以看到它并与之交互，这就是我选择的原因SVG优于普通照片 查看详情
如何在 HTML 中使用外部 SVG？
...描述】：我尝试制作一个引用SVG文件的HTML，该SVG文件是交互式的（CSS悬停）：如果我使用<imgsrc="algerie.svg">，我会失去交互性。如果我使用开发工具在新选项卡中打开此图片，它会变成交互式的。如果我使用：&... 查看详情
svg的作用及工作原理是啥？
可以任意放大图形显示，但绝不会以牺牲图像质量为代价；可在SVG图像中保留可编辑和可搜寻的状态；平均来讲，SVG文件比JPEG和PNG格式的文件要小很多，因而下载也很快。可以相信，SVG的开发将会为Web提供新的图像标准。1、SVG... 查看详情
svg在ios中使用总结
...其它扩展（extensibility）。SVG图形是可交互的和动态的，可以在SVG文件中嵌入动画元素或通过脚本来定义动画。SVG在iOS中可以用UIWebView来加载：这种方法来加载SVG，虽然也可以，但是却存在诸如放大缩小、点击交互等问题。所以... 查看详情