Динамічні 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" />
    </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" />
    </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" />
    </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" r="25"
            fill="mediumorchid" />
        <Circle
            cx="125" cy="50" r="25"
            fill="#ff0099" />
        <Circle
            cx="200" cy="50" r="25"
            fill="none"
            stroke="crimson" />
    </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 x1="25" y1="25" x2="75" y2="75"
            strokeWidth="5"
            stroke="orange" />
    </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
            points="25,25 25,75 50,75 50,50 75,25"
            strokeWidth="5"
            stroke="orange"
            fill="none" />
    </SVGComponent>,
    document.getElementById('svg_polyline')
);

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