Цитата:
Где тут смайлик с баксами в глазах? :D А вообще читаю сейчас - технология супер, жаль только IE как всегда жопу показывает. |
Так. Первый стоп.
Есть у меня эллипс. Если я embed вставляю с шириной 100 и высотой 200 - тогда все ок, но при любых других соотношениях сторон эллипс либо заходит за края embed либо не достает до них. Как возможно сделать чтоб при любых размерах embed, эллипс всегда касался краев этого embed'a? Код:
<?xml version="1.0" encoding="utf-8"?> |
Для отрисовки svg не обязательно использовать xml.
Вот примерчик (не смотри на некоторые функции: выдирал из большого проекта, не стал убирать кое-что ненужное). Главное - понять принцип :)
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var SVG = function(o){
this.AS = 'auto';
var t = this;
function A(e,a,v){e.setAttribute(a,v)}
function C(i){var e = document.createElementNS('http://www.w3.org/2000/svg',i); A(e, 'shape-rendering', t.AS); return e}
if (document.createElementNS&&C('svg').x!=null){
this.Holder = o.appendChild(C('svg'));
this.createPolyline = function(w, p, f, c){
var o = C('polyline');
o.addPoint = function(x,y){
var z = C('polyline');
A(z, 'points', x+','+y);
this.points.appendItem(z.points.getItem(0));
z = null
}
o.setColor = function(C){A(this, 'stroke', C)};
o.setFill = function(C){A(this, 'fill', C)};
o.setPoints = function(C){A(this, 'points', C)};
o.setWidth = function(C){A(this, 'stroke-width', C+'px')};
o.setWidth(w);
o.setPoints(p);
if (f) o.setFill(f);
if (c) o.setColor(c);
t.Holder.appendChild(o);
return o
}
}
else if (document.createStyleSheet) {
this.Holder = o;
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
var style = document.createStyleSheet();
style.addRule('v\\:*', 'behavior: url(#default#VML);');
style.addRule('v\\:*', 'antialias: '+t.AS+';');
function C(i){return document.createElement(i)}
this.createPolyline = function(w, p, f, c){
var o = C('v:polyline');
o.addPoint = function(x,y){
t.Holder.removeChild(this);
if (this.left>x) {
this.left = x;
this.style.left = this.left+'px';
}
if (this.top>y) {
this.top = y;
this.style.top = this.top+'px';
}
this.P = this.P+' '+x+','+y;
this.points = this.P;
t.Holder.appendChild(this);
}
o.setColor = function(C){this.strokecolor = C};
o.setFill = function(C){
if (C&&C!='none') {
o.filled = true;
o.fillcolor = C
}
else o.filled = false;
};
o.setPoints = function(C){this.points = C; this.P = C};
o.setWidth = function(C){this.strokeweight = C+'px'};
o.setWidth(w);
o.setFill(f);
o.setPoints(p);
/(\d*),(\d*)/.test(p);
o.style.position = 'absolute';
o.left = RegExp.$1;
o.style.left = o.left+'px';
o.top = RegExp.$2;
o.style.top = o.top+'px';
if (c) o.setColor(c);
t.Holder.appendChild(o);
return o
}
}
}
function getElementPosition(elem) {
if (null==elem) return {"left":0, "top":0, "width": 0, "height":0,"x":0, "y":0, "xSize": 0, "ySize":0};
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem) {
l += elem.offsetLeft-elem.scrollLeft;
t += elem.offsetTop-elem.scrollTop;
elem = elem.offsetParent;
}
var xCentr = l + Math.round(w/2);
var yCentr = t + Math.round(h/2);
return {"left":l, "top":t, "width": w, "height":h,"x":l, "y":t, "xSize": w, "ySize":h,"xCentr":xCentr,"yCentr":yCentr};
}
function PreventDefault(e) {
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
var div = document.createElement('div');
div.style.background = '#675';
div.style.height = '100%';
var svg = new SVG(div);
if (svg.Holder) {
svg.Holder.style.height = '100%';
div.onmousemove = function(e){
if (typeof window.Line == 'undefined'||!Line) return;
var pos = getElementPosition(this);
Line.addPoint(e.clientX-pos.x,e.clientY-pos.y);
}
div.onmousedown = function(e){
e=e||event;
PreventDefault(e);
var pos = getElementPosition(this);
pos.x = e.clientX - pos.x;
pos.y = e.clientY - pos.y;
Line = svg.createPolyline( 3, pos.x+','+pos.y+' '+pos.x+','+pos.y, 'none', '#eee');
}
div.onmouseup = function(){Line=null}
}
document.body.appendChild(div);
|
забыл в div.onmousemove дописать e=e||event; для ИЕ :)
|
ZoNT, огромное спасибо, очень помог.
SVG часть сделал - работает отлично. По ходу обнаружил в Safari багу - если окружность перемещать по картинке, то от краев, где окружность заходит за "рамку" (только в Сафари такая рамка ограничивает svg-рисунок) остается шлейф. Решил проблему, сделав прозрачную окружность с большим радиусом. Сейчас буду vml мучить. Еще раз спасибо - выглядит на порядок лучше, чем с растягиванием GIF. =) |
Хм. А как картинку вставить JS-ом например в группу (<g> </g>) в SVG?
В частности как задать путь к рисунку? |
таким не интересовался... А зачем тебе вставлять картинки методами svg, если можно просто вставить методами DOM?
|
Хотелось все сделать "по правилам". =)
Самое главное картинка вставляется, но она прозрачная. =( |
ну так почитай на w3c что там про картинки пишут... Там всё хорошо про svg написано...
|
| Часовой пояс GMT +3, время: 03:24. |