求助,用JS如何控制svg

JavaScript025

求助,用JS如何控制svg,第1张

解决方法:

A)让伺,服,器代为读取这些外部资源,使它们变成同网域的资料。

B)用 JS 建立 img,将其 crossOrigin 特性设成 *anonymous*,再请求 SVG。如果对方的伺,服,器有明确允许(有设定正确的 Access-Control-Allow-Origin),并且该 SVG 没有引用任何外部资源,并且浏览器支援,那麼载入后你可以用 JS 存取其内部资料。

在固定的canvas画布内缩放:

<script type='text/javascript' src="jquery.js"></script>

<script type='text/javascript'>

function bindchangesize(jq){

var touchstarttime = 0 //记录手指按住屏幕的时间

var dbx = 0

var dby = 0

var pretevent = false

var startX //按住时坐标X

var startY //按住时坐标Y

var startLen

var isstart = false

var isonefinger = true //判断是否是一只手指按住屏幕

jq.bind('touchstart',_touchstart)

jq.bind('touchmove',_touchmove)

jq.bind('touchend',_touchend)

function _touchstart(e){

isstart = true

isonefinger = true

if(pretevent){

e.stopPropagation()

}

var ttime = (new Date()).getTime()

var touch

if(typeof e.clientX != 'undefined'){

touch = e

}else{

touch = e.originalEvent.touches[0]

if(e.originalEvent.touches && e.originalEvent.touches.length > 1){

isonefinger = false

}

}

startX = touch.clientX

startY = touch.clientY

if(!isonefinger){

var touch1 = e.originalEvent.touches[1]

var x = touch1.clientX

var y = touch1.clientY

startLen = Math.sqrt(Math.pow(startX - x,2) + Math.pow(startY - y,2))

}

if(!isonefinger){

touchstarttime = ttime

}

}

function _touchmove(e){

var touch

var jq0 = $(this)

jq0.stop(true,true)

if(typeof e.clientX !='undefined'){

touch=e

}else{

touch= e.originalEvent.touches[0]

}

var x = touch.clientX

var y = touch.clientY

var zoom = jq0.get(0).style.zoom

if(zoom == 0) zoom = 1

if(!isonefinger){

var touch1 = e.originalEvent.touches[1]

var x1 = touch1.clientX

var y1 = touch1.clientY

var nowlen = Math.sqrt(Math.pow(x1 - x,2) + Math.pow(y1 - y,2))

var len = nowlen - startLen

if(len < 0){

len = nowlen

}else{

len = startLen + len

}

var percent = len/startLen

var changezoom = zoom*percent

if(changezoom>5){

changezoom = 5

}

if(changezoom<0.5){

changezoom = 0.5

}

jq0.animate({zoom:changezoom})

}

}

function _touchend(e){

startX = null

startY = null

isstart = false

isonefinger=true

startLen = 0

}

}

function bindevent(){

var jqcanvas1 = $('#canvasid') //通过ID找到canvas

bindchangesize(jqcanvas1)

}

</script>

首先canvas和SVG不是对立的,应用场景不同,各有各的用处.

svg可缩放矢量图形常用在地图和矢量图标制作等,不会因为放大缩小而失真。

canvas是基于js的绘图标签常用于网页游戏的制作如js的飞机大战,也可以用来做网页的刮奖等。