Главная » Языки программирования

Html css svg path

Содержание
  1. Html css svg path
  2. Example 1
  3. Example
  4. Example 2
  5. Example
  6. SVG-path
  7. M, m
  8. Z, z
  9. L, l
  10. H, h
  11. V, v
  12. C, c
  13. path()
  14. Try it
  15. Syntax
  16. Parameters
  17. Examples
  18. Examples of correct values for path()
  19. Use as the value of offset-path
  20. Modify the value of the SVG path d attribute
  21. CSS
  22. HTML
  23. Result
  24. Specifications
  25. Browser compatibility
  26. See also
  27. Found a content problem with this page?
  28. MDN
  29. Support
  30. Our communities
  31. Developers
  32. Html css svg path
  33. Example
  34. Attributes
  35. Global attributes
  36. Usage notes
  37. Specifications
  38. Browser compatibility
  39. See also
  40. Found a content problem with this page?
  41. MDN
  42. Support
  43. Our communities
  44. Developers

Html css svg path

The element is used to define a path.

The following commands are available for path data:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.

Example 1

The example below defines a path that starts at position 150,0 with a line to position 75,200 then from there, a line to 225,200 and finally closing the path back to 150,0:

Sorry, your browser does not support inline SVG.

Example

Example 2

Bézier curves are used to model smooth curves that can be scaled indefinitely. Generally, the user selects two endpoints and one or two control points. A Bézier curve with one control point is called a quadratic Bézier curve and the kind with two control points is called cubic.

The following example creates a quadratic Bézier curve, where A and C are the start and end points, B is the control point:

Читайте также:  Sudo update alternatives config php

Sorry, your browser does not support inline SVG.

Example

Complex? YES. Because of the complexity involved in drawing paths it is highly recommended to use an SVG editor to create complex graphics.

Источник

SVG-path

path — более сложный вариант линии. С его помощью можно нарисовать line , polyline , polygon , circle и rect :

В отличие от polygon , фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.

svg class="svg" width="150" height="130"> symbol id="s-crown"> path d="M 10,110 L 10,10 L 40,50 L 70,10 L 100,50 L 130,10 L 130,110 z" fill="gold" stroke="orange" stroke-width="5"/> symbol> use xlink:href="#s-crown" x="5" y="7"/> svg>

Точки фигуры задаются в атрибуте d . В значении содержатся команды, управляющие направлением и видом линий. Координаты x и y можно разделять запятой или пробелом, но запятая наглядней.

Все команды обозначаются одной буквой, и могут быть записаны в верхнем или нижнем регистре. Верхний регистр обозначает использование абсолютных координат, нижний — относительных.

Примеры ниже демонстрируют разницу между абсолютными и относительными координатами. Различие состоит во второй строке: M 20,20 L 100,150 vs m 20,20 l 100,150 .

Команды в нижнем регистре ( m и l ) указывают отсчитывать координаты не от верхнего левого угла полотна, а от текущей точки (пример справа):

svg width="200" height="200"> path stroke="crimson" stroke-width="2" d="M 20,20 L 80,50 M 20,20 L 100,150"/> svg>
svg width="200" height="200"> path stroke="skyblue" stroke-width="2" d="M 20,20 L 80,50 m 20,20 l 100,150"/> svg>

M, m

M — moveto, обозначает начало новой линии — точку, с которой мы начинаем рисовать.

Команд M в строке может быть несколько, каждая из них будет обозначать начало новой линии:

svg width="200" height="170"> path stroke="orange" stroke-width="3" d="M 20,20 L150,150 M 50,20 L180,150"/> svg>

Z, z

Z — closepath — замкнуть фигуру, при этом рисуется линия от текущей точки до начальной. Действие этой команды не зависит от регистра, Z и z сработают одинаково.

Z избавляет от необходимости указывать последнюю точку с координатами первой, чтобы закончить фигуру. Кроме того, если замыкать фигуру вручную, может получиться неаккуратный стык:

svg width="200" height="180"> path stroke="orange" stroke-width="10" fill="gold" d="M 100,20 L 180,160 L 20,160 L 100,20"/> svg>

Вместо последней точки используем Z и получаем аккуратно замкнутую фигуру:

svg width="200" height="180"> path stroke="orange" stroke-width="10" fill="gold" d="M 100,20 L 180,160 L 20,160 z"/> svg>

L, l

L — lineto — рисование линии.

Следует отметить, что писать L перед каждой точкой не обязательно:

L 80,20 L 20,100 = L 80,20 20,100

Строчки сработают одинаково, но с L удобнее, если код предполагается читать.

svg width="200" height="180"> path stroke="green" stroke-width="3" fill="none" d="M 20,50 L 80,20 20,100 150,50 50,150 150,120 "/> svg>

H, h

H — horizontal lineto — рисование горизонтальной линии.

V, v

V — vertical lineto — рисование вертикальной линии.

С помощью этих команд очень удобно рисовать прямоугольные фигуры:

svg width="200" height="200"> path stroke="lightseagreen" stroke-width="5" fill="turquoise" d="M 20,20 h 160 v 160 h -80 v -80 h -80 z "/> svg>

Помимо команд для рисования прямых линий, есть несколько команд для рисования кривых. Они достаточно интересные, хотя и несколько сложнее для понимания.

Пунктирная линия в примерах (где возможно) показывает, что получается без команды, задающей кривую. Для меня вспомогательная линия сделала несколько понятнее прицип работы этих команд.

C, c

Параметры: x1 y1 x2 y2 x y

Источник

path()

The path() CSS function accepts an SVG path string, and is used in CSS Shapes and CSS Motion Path to enable a shape to be drawn.

Try it

Syntax

Parameters

The filling rule for the interior of the path. Possible values are nonzero or evenodd . The default value is nonzero . See fill-rule for more details.

The string is a data string for defining an SVG path.

Examples

Examples of correct values for path()

path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

Use as the value of offset-path

The path() function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle.

Modify the value of the SVG path d attribute

The path() can be used to modify the value of the SVG d attribute, which can also be set to none in your CSS.

The «V» symbol will flip vertically when you hover over it, if d is supported as a CSS property.

CSS

html, body, svg  height: 100%; > /* This path is displayed on hover*/ #svg_css_ex1:hover path  d: path("M20,80 L50,20 L80,80"); >

HTML

svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> path fill="none" stroke="red" d="M20,20 L50,80 L80,20" /> svg>

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Html css svg path

The SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.

Example

html, body, svg  height: 100%; > 
svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> svg>

Attributes

This attribute defines the shape of the path. Value type: ; Default value: » ; Animatable: yes

This attribute lets authors specify the total length for the path, in user units. Value type: ; Default value: none; Animatable: yes

Global attributes

aria-activedescendant , aria-atomic , aria-autocomplete , aria-busy , aria-checked , aria-colcount , aria-colindex , aria-colspan , aria-controls , aria-current , aria-describedby , aria-details , aria-disabled , aria-dropeffect , aria-errormessage , aria-expanded , aria-flowto , aria-grabbed , aria-haspopup , aria-hidden , aria-invalid , aria-keyshortcuts , aria-label , aria-labelledby , aria-level , aria-live , aria-modal , aria-multiline , aria-multiselectable , aria-orientation , aria-owns , aria-placeholder , aria-posinset , aria-pressed , aria-readonly , aria-relevant , aria-required , aria-roledescription , aria-rowcount , aria-rowindex , aria-rowspan , aria-selected , aria-setsize , aria-sort , aria-valuemax , aria-valuemin , aria-valuenow , aria-valuetext , role

Usage notes

Categories Graphics element, Shape element
Permitted content Any number of the following elements, in any order:
Animation elements
Descriptive elements

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on May 10, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Оцените статью
© 2024 Программирование