Применение SVG-эффектов к HTML контенту | Participants
|
- Statistics
- Participants
- Translate into Russian
- Translation result
- 60% translated in draft.
If you do not want to register an account, you can sign in with OpenID.
Applying SVG Effects To HTML Content | ||
Applying SVG Effects To HTML Content | ||
Introduction | ||
One of the problems with the standards-based Web is that it's hard to use SVG's features to enhance HTML content. For example, there is no reasonable way to clip an HTML element to a non-rectangular region, or to apply an alpha mask to an HTML element, or to apply image processing effects such as color channel manipulation to HTML elements. SVG has these features but they can only be applied to SVG elements. You can embed the HTML in a <foreignObject>, but that has major limitations; in particular, you can't apply effects to HTML elements via stylesheets without changing the markup --- ripping out content and putting it inside ugly SVG fragments --- and breaking most CSS layouts in the process. | Одной из проблем веб-стандартов является трудность использования возможностей SVG для улучшения содержания HTML. Например, нет приемлемого способа для обрезки HTML-элементов в непрямоугольную форму, или наложения полупрозрачной маски на HTML-элемент, или применения визуальных эффектов, таких как регулирование цветов. В SVG есть такие возможности, но они могут быть применимы только к SVG-элементам. Вы можете встроить HTML в <foreignObject>, но здесь есть большие ограничения, и на практике вы не сможете использовать эти эффекты для HTML-элементов при помощи стилей, без изменения разметки (вырезания контента и помещения его в ужасные SVG-фрагменты) и порчи CSS-вёрстки в процессе. | |
One approach to solving this is to create new CSS properties for the desired effects. Dave Hyatt's been doing this a bit in Webkit, and the approach has its place. However for complex effects such as clipping to arbitrary shapes and custom image processing, CSS isn't really up to the task. One problem is that CSS isn't good at manipulating structured values like shapes and filter processing stacks; they're cumbersome to write in CSS expression syntax, or else they require new custom CSS syntax (e.g. @-rules), and there's no standard DOM to let scripts manipulate components of these structured values. Another issue is that we should try to avoid duplicating specification and implementation of complex features. | Один из способов решить эту проблему — создать новые CSS-свойства с нужными эффектами. Дэйв Хиат делает это в Webkit'е, теперь у данного решения есть своё место. Однако для сложных эффектов, таких как обрезание произвольной формой или настраиваемые визуальные эффекты изображений CSS действительно не дотягивает. Одна из проблем в том, что CSS не предназначен для манипулирования структурированными значениями — такими как окружности или набор фильтров; они слишком огромны для выражения синтаксисом CSS(например @-правилами) и не имеют стандартной DOM (документной модели объекта), чтобы позволить скриптам манипуливать частями этих значений и исполнения возможностей в комплексе. | |
So I've been experimenting with better ways to apply SVG effects to HTML content. The first step is to make SVG's 'clip-path', 'mask' and 'filter' properties work when applied to HTML content. | Итак, я немного поэксперементировал с наиболее известными способами для применения SVG-эффектов к HTML-контенту. Первый шаг — сделать SVG-свойства “clip-path”, “mask” и “filter”, применимые к HTML-контенту. | |
clip-path | ||
Here's some XHTML markup that clips elements to a shape composed of a circle next to a rectangle. | Вот некоторая XHTML-разметка, которая обрезает элементы в композицию из шара и прямоугольника. | |
So we have a block element, an <iframe>, and an inline element all clipped by the same clipPath. The clipPath shape coordinates are relative to the bounding-box of the clipped object. | Итак у нас есть блочный элемент, <iframe> и строчный элемент: все они обрезаны некоторым clipPath. Координаты формы clipPath располагаются относительно обрезаемого объекта. | |
Here's the rendering: |
© все кто переводил. License: использование перевода разрашено в любых целях, без разрешения, но с указанием всех авторов
— «наиболее известными» думаю более понятно, чем «лушими» в контексте “better ways” — koozoo
— не спорю) — arestov