Использование React.js для рисования SVG

reactjs-logo-thumb
image-869

Масштабируемая векторная графика (Scalable Vector Graphics — SVG) являются отличным способом, чтобы включить векторную графики на веб-странице. Они легкие, на основе XML, и поддерживаются почти всеми современными браузерами. Так как они на основе XML, они состоят из разметки, и могут(в теории, по крайней мере) создавать все то, что может создавать корректные 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, он находится ниже, можете посмотреть его через «Просмотр кода элемента»

Это обычный пустой SVG элемент.

Основные формы

Прямоугольники

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')
);

Работа с цветами

Цвета передаются как параметры компонентов. Вы можете использовать любой из цветовых форматов, доступных в 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')
);