Tạo đồ họa SVG bằng Javascript?

Làm cách nào để tạo đồ họa SVG bằng JavaScript?

Tất cả các trình duyệt có hỗ trợ SVG không?

Hãy xem danh sách này trên Wikipedia về những trình duyệt nào hỗ trợ SVG. Nó cũng cung cấp các liên kết đến nhiều chi tiết hơn trong phần chú thích. Ví dụ, Firefox hỗ trợ SVG cơ bản, nhưng hiện tại thiếu hầu hết các tính năng hoạt ảnh.

Bạn có thể tìm thấy hướng dẫn về cách tạo đối tượng SVG bằng Javascript tại đây :

var svgns = "http://www.w3.org/2000/svg";
var svgDocument = evt.target.ownerDocument;
var shape = svgDocument.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green"); 

Câu trả lời này là từ năm 2009. Giờ đây, một wiki cộng đồng trong trường hợp có ai muốn cập nhật nó.

IE cần một plugin để hiển thị SVG. Phổ biến nhất là phần mềm có sẵn để tải xuống bởi Adobe; tuy nhiên, Adobe không còn hỗ trợ hoặc phát triển nó nữa. Firefox, Opera, Chrome, Safari, tất cả sẽ hiển thị SVG cơ bản tốt nhưng sẽ gặp vấn đề nếu sử dụng các tính năng nâng cao, vì hỗ trợ chưa hoàn thiện. Firefox không hỗ trợ hoạt ảnh khai báo.

Các phần tử SVG có thể được tạo bằng javascript như sau:

// "circle" may be any tag name
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set any attributes as desired
shape.setAttribute("cx", 25);
shape.setAttribute("cy", 25);
shape.setAttribute("r",  20);
shape.setAttribute("fill", "green");
// Add to a parent node; document.documentElement should be the root svg element.
// Acquiring a parent element with document.getElementById() would be safest.
document.documentElement.appendChild(shape);

Các đặc điểm kỹ thuật SVG mô tả các giao diện DOM cho tất cả các yếu tố SVG. Ví dụ, SVGCircleElement, mà được tạo ra ở trên, có cx, cyvà rthuộc tính cho các điểm trung tâm và bán kính, có thể được truy cập trực tiếp. Đây là các thuộc tính SVGAnimatedLength, có một thuộc baseValtính cho giá trị bình thường và một thuộc animValtính cho giá trị động. Các trình duyệt tại thời điểm này không hỗ trợ animValtài sản một cách đáng tin cậy . baseVallà SVGLength, có giá trị do thuộc valuetính đặt.

Do đó, đối với hoạt ảnh script, người ta cũng có thể đặt các thuộc tính DOM này để điều khiển SVG. Mã sau phải tương đương với mã trên:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
shape.cx.baseVal.value = 25;
shape.cy.baseVal.value = 25;
shape.r.baseVal.value = 20;
shape.setAttribute("fill", "green");
document.documentElement.appendChild(shape);

Để làm điều đó trên nhiều trình duyệt, tôi thực sự khuyên bạn nên sử dụng RaphaelJS . Nó có một API tốt và có VML trong IE, điều đó không thể hiểu được SVG.

Tất cả các trình duyệt hiện đại ngoại trừ IE đều hỗ trợ SVG

Đây là hướng dẫn cung cấp hướng dẫn từng bước về cách làm việc với SVG bằng javascript:

SVG Scripting với JavaScript Phần 1: Vòng tròn đơn giản

Như Boldewyn đã nói nếu bạn muốn

Để làm điều đó trên nhiều trình duyệt, tôi thực sự khuyên bạn nên sử dụng RaphaelJS: rapaheljs.com

Mặc dù hiện tại tôi cảm thấy kích thước của thư viện quá lớn. Nó có nhiều tính năng tuyệt vời mà bạn có thể không cần.

Tôi thích thư viện jQuery SVG rất nhiều. Nó giúp tôi mỗi khi tôi cần thao tác với SVG. Nó thực sự tạo thuận lợi cho công việc với SVG từ JavaScript.

Tôi không tìm thấy câu trả lời phù hợp nên để tạo vòng kết nối và thêm vào svg, hãy thử cách này:

var svgns = "http://www.w3.org/2000/svg";
var svg = document.getElementById('svg');
var shape = document.createElementNS(svgns, "circle");
shape.setAttributeNS(null, "cx", 25);
shape.setAttributeNS(null, "cy", 25);
shape.setAttributeNS(null, "r",  20);
shape.setAttributeNS(null, "fill", "green");
svg.appendChild(shape);

<svg id="svg" width="100" height="100"></svg>

Không phải tất cả các trình duyệt đều hỗ trợ SVG. Tôi tin rằng IE cần một plugin để sử dụng chúng. Vì svg chỉ là một tài liệu xml nên JavaScript có thể tạo chúng. Tôi không chắc chắn về việc tải nó vào trình duyệt. Tôi chưa thử điều đó.

Liên kết này có thông tin về javascript và svg:

http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm

Có một plugin jQuery cho phép bạn thao tác SVG thông qua Javascript:

http://plugins.jquery.com/project/svg

Từ phần giới thiệu của nó:

Được hỗ trợ nguyên bản trong Firefox, Opera và Safari và thông qua trình xem Adobe SVG hoặc trình phát Renesis trong IE, SVG cho phép bạn hiển thị đồ họa trong các trang Web của mình. Giờ đây, bạn có thể dễ dàng điều khiển canvas SVG từ mã JavaScript của mình.

Bạn có thể sử dụng d3.js. Nó rất dễ sử dụng và mạnh mẽ.

D3.jslà một thư viện JavaScript để thao tác tài liệu dựa trên dữ liệu. D3 giúp bạn làm cho dữ liệu trở nên sống động bằng HTML, SVG và CSS.

Có nhiều thư viện trên đồ họa SVG sử dụng Javascript như: Snap, Raphael, D3. Hoặc bạn có thể giao diện trực tiếp SVG bằng javascript đơn giản.

Hiện tại tất cả các phiên bản mới nhất của trình duyệt đều hỗ trợ SVG v1.1. SVG v2.0 đang trong Bản thảo làm việc và còn quá sớm để sử dụng.

Bài viết này hướng dẫn cách tương tác với SVG bằng Javascript và có tham chiếu đến các liên kết để hỗ trợ trình duyệt. Giao diện với SVG

IE 9 hiện hỗ trợ SVG 1.1 cơ bản. Đó là khoảng thời gian, mặc dù IE9 vẫn còn kém xa Google Chrome và Firefox SVG hỗ trợ.

http://msdn.microsoft.com/en-us/ie/hh410107.aspx

Vì vậy, nếu bạn muốn xây dựng từng nội dung SVG của mình trong JS, thì đừng chỉ sử dụng createElement(), những thứ đó sẽ không vẽ, thay vào đó hãy sử dụng điều này:

var ci = document.createElementNS("http://www.w3.org/2000/svg", "circle");

Hiện tại tất cả các trình duyệt chính đều hỗ trợ svg . Tạo svg trong JS là rất đơn giản (hiện tại innerHTML=...là khá nhanh )

element.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
`;

function createSVG() {
  box.innerHTML = `
    <svg viewBox="0 0 400 100" >
      <circle id="circ" cx="50" cy="50" r="50" fill="red" />
    </svg>
  `;
}

function decRadius() {
  r=circ.getAttribute('r');
  circ.setAttribute('r',r*0.5);
}

<button onclick="createSVG()">Create SVG</button>
<button onclick="decRadius()">Decrease radius</button>
<div id="box"></div>