Чертежи в SVG формате. Часть 3. — Черновик стандарта

[KeepYourMind]

Так круто это все выглядит.
Жаль я совсем никак не связан с графиками :-)

[Killy]

В Opera 12.15 странно выглядит: 100%, 200%.

[viklviv]

в CSS прописано

line, rect, circle, ellipse, path, text {
  vector-effect: non-scaling-stroke;
}

Возможно свойство vector-effect в Opera не поддерживается пока.
Тестирую в Firefox и Chrome.

[kentilini]

Может вы мне сможете ответить: можно ли нарисовать окружность с заданной толщиной линии с помощью одного свг элемента, используя только прямые линии и дуги окружности?

Просто, я не смог этого придумать, а задавать stroke-wide и рисовать полную окружность вместо заливки области между двумя окружностями как-то не хотелось. В итоге при аффинных преобразованиях иногда «бублик» может на пиксель вылазить за пределы части бублика за счет округления в вычислениях.

[viklviv]

можно попробовать тег path. Нарисовать две дуги почти замкнутые на окружность и заштриховать область между ними. Покажите скан что у Вас выходит и что хотите сделать.

[kentilini]

У меня сейчас нет доступа к коду, но общую суть и так могу передать. Хотел реализовать что такое:

Возможна ситуация, что внутри этой окружности может быть еще одна и т.д. цвет фона может быть прозрачный и много других мелочей, которые помешают.
Как нарисовать целую окружность одного цвета?
1. Нарисовать окружность и внутрь наложить еще одну цвета фона(если фон прозрачный — работает не корректно)
2. Нарисовать 2 половинки окружности без нахлеста: при зуммировании в FF и хроме иногда проскакивет не прорисованная полоска в точке соединения. Если с нахлестом: опять проблема с прозрачностью.
3. Нарисовать окружность и задать ей ширину линии. При повороте системы координат округление будет работать немного по разному для дуги окружности(которая рисуется path) и для целого бублика.
4. Всегда рисовать целую окружность и обрезать ее маской. Единственный рабочий вариант, но в эксплорере жутко тормозит.
честно говоря не знаю что делать

[viklviv]

Незнаю правельно ли понял я Вас, пример кода и демонстрационный пример

<path d="M0,-25A25,25 0 0 1 13.4178,21.0941L80.5067,126.5649A150,150 0 0 0 0,-150z" stroke="red" fill="red"/>
<path d="M13.4178,21.0941A25,25 0 0 1 -12.4329,21.6892L-74.5973,130.1355A150,150 0 0 0 80.5067,126.5649z" stroke="blue" fill="blue"/>
<path d="M-12.4329,21.6892A25,25 0 0 1 -22.9638,9.8826L-137.7826,59.2956A150,150 0 0 0 -74.5973,130.1355z" stroke="orange" fill="orange"/>

[kentilini]

Шаблон для штриховки дерева

Можно написать на js функцию, которая будет подгонят под нужные размеры.

Ну или использовать атрибут transform, может для ваших целей подойдет. Не знаю, что делать с не прямоугольными фигурами в этом случае.

[customtema]

Хорошо бы плагин для Inkscape.

[prokoudine]

И что этот плагин должен делать? :)

[dmitryustimov]

Спасибо, нашёл в статье несколько интересных решений. С Вашего позволения, утащу их в свой проект.

[dmitryustimov]

Может быть окажется кому-нибудь полезным:

<pattern id="hatch0_45" width="20" height="20" patternUnits="userSpaceOnUse">
    <line class="lt2_025 " x1="1" y1="20" x2="20" y2="1" />
    <line class="lt2_025 " x1="0" y1="1" x2="1" y2="0" />
</pattern>

Смещение должно быть на ширину линии. Так, например, для первой линии x1 = 1 и y2 = 1 означает, что ширина линии штриховки равна 1.