Динамічні SVG з React.js

Scalable Vector Graphics (SVG) - це відмінний спосіб включити векторну графіку у свою веб-сторінку. Вона легка, заснована на XML і підтримується майже всіма сучасними браузерами. XML лежить в основі SVG, тож вона не містить нічого крім розмітки, і може (в теорії, принаймні) бути створена будь-яким інструментом, що генерує допустиму XML розмітку. В цей список входить чудова JavaScript бібліотека React.js.

Приступаємо до роботи

SVG знаходиться всередині svg тегів, тому першим кроком є створення простого компонента, що створює тег svg і рендерить дітей всередині.

    var SVGComponent = React.createClass({
        render: function() {
            return this.transferPropsTo(
                <svg>{this.props.children}</svg>
            );
        }
    });
    
    React.renderComponent(
        <svgcomponent height="50" width="50">,
        document.getElementById('svg_mount_example')
    );

Я вже створив SVG 50х50.

Звичайно, він порожній, але, якщо оглянути його, ви будете чітко бачити, що він там.

Основні форми

Прямокутник

    var Rectangle = React.createClass({
        render: function() {
            return this.transferPropsTo(
                <rect>{this.props.children}</rect>
            );
        }
    });
    
    React.renderComponent(
        <svgcomponent height="100" width="100">
            <rectangle height="50" width="50" x="25" y="25">
        </rectangle></svgcomponent>,
        document.getElementById('svg_rectangle')
    );

Круг

    var Circle = React.createClass({
        render: function() {
            return this.transferPropsTo(
                <circle>{this.props.children}</circle>
            );
        }
    });
    
    React.renderComponent(
        <svgcomponent height="100" width="100">
            <circle cx="50" cy="50" r="25">
        </circle></svgcomponent>,
        document.getElementById('svg_circle')
    );

Еліпс

    var Ellipse = React.createClass({
        render: function() {
            return this.transferPropsTo(
                <ellipse>{this.props.children}</ellipse>
            );
        }
    });
    
    React.renderComponent(
        <svgcomponent height="100" width="100">
            <ellipse cx="50" cy="50" rx="25" ry="15">
        </ellipse></svgcomponent>,
        document.getElementById('svg_ellipse')
    );

Кольори

Кольори передаються як параметри компонентів, так само, як у HTML у пре-CSS часи. Ви можете використовувати будь-які формати кольорів, які є доступними в CSS2, також SVG підтримує набір CSS кольорів.

Два найбільш корисних SVG параметри для роботи з кольором:

fill: колір фігури;
stroke: колір обмежуючої лінії.
Приклад використання цих параметрів:

    React.renderComponent(
        <svgcomponent height="100" width="230">
            <circle cx="50" cy="50" fill="mediumorchid" r="25">
            <circle cx="125" cy="50" fill="#ff0099" r="25">
            <circle cx="200" cy="50" fill="none" r="25" stroke="crimson">
        </circle></circle></circle></svgcomponent>,
        document.getElementById('svg_colors')
    );

SVG підтримує величезну кількість кольорів і властивостей креслення. Розуміння того, як вони працюють і взаємодіють є одним із ключів до удосконалення графічних можливостей.

Лінії

Прямі лінії

    var Line = React.createClass({
        render: function() {
            return this.transferPropsTo(
                <line>{this.props.children}</line>
            );
        }
    });
    
    React.renderComponent(
        <svgcomponent height="100" width="100">
            <line stroke="orange" strokewidth="5" x1="25" x2="75" y1="25" y2="75">
        </line></svgcomponent>,
        document.getElementById('svg_straight_line')
    );

Полілінії

    var Polyline = React.createClass({
        render: function() {
            return this.transferPropsTo(
                <polyline>{this.props.children}</polyline>
            );
        }
    });
    
    React.renderComponent(
        <svgcomponent height="100" width="100">
            <polyline fill="none" points="25,25 25,75 50,75 50,50 75,25" stroke="orange" strokewidth="5">
        </polyline></svgcomponent>,
        document.getElementById('svg_polyline')
    );

Це лише мізерна частина того, що можна зробити з SVG. Cподіваюся, що тепер, коли ви дізналися про основні моменти, ви будете поглиблювати свої знання і створювати круті абстракції, які можна буде об'єднувати в складні динамічні зображення.