Jump to content
  • 0

Кто-нибудь знает как побороть svg?


Nomo
 Share

Question

Сложность в том, что имеется svg объект, убрала из его кода ширину и высоту, теперь нужно расчитать правильно высоту и ширину в em-ах, дабы все это выглядело красиво. В css описываю параметры соответствующие, но выходит, что с некоторых сторон появляется рамка. Кто-нибудь может мне сказать как пиксели перевести в em???? (или это вообще фигня какая-то...В общем помогите, как быть не знаю!)

.insets embed.kadr {

/*border: 1px solid red;*/

margin: 0;

padding: 0;

float: left;

width: 4.42em;

height: 2em;

}

http://www.adobe.com/svg/viewer/install/" />

xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" viewBox="0 0 42 19"

overflow="visible" enable-background="new 0 0 42 19" xml:space="preserve">

/**********************ну тут много всяких полезностей********************/

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
показывайте код!

Да с кодом все нормально, я просто напросто не могу правильно рассчитать размер графики в em, т.к. это векторная графика я убрала из кода файла размеры в пикселях, но чтобы картинка была нормальной и масштабировалась без косяков нужно сохранить пропорции. Так вот, на данный момент я вычисляю размеры в em методом тыка, то есть элементарно подбираю до сотых долей, но если немного ошибиться, то в IE при увеличении/уменьшении шрифта появляются мелкие косяки. В общем нужно как то пересчитать пиксели в em: width="40.5" height="17.12" (в пикселях), Font-size у слоя 1em

Link to comment
Share on other sites

  • 0

По вашим данным задачу решить невозможно, сразу видно, вы не совсем поняли, что такое em.

Нужен font-size не только самого слоя, но и всех родительских включая body, самый простой способ посмотреть сколько пикселей в em для конкретного слоя, установить FireBug (плагин для FireFox).

Если вы задаете размер шрифта для body в em, это приводит к глюкам при масштабировании в ie, используйте проценти для body и em в остальных случаях.

Link to comment
Share on other sites

  • 0
По вашим данным задачу решить невозможно, сразу видно, вы не совсем поняли, что такое em.

Нужен font-size не только самого слоя, но и всех родительских включая body, самый простой способ посмотреть сколько пикселей в em для конкретного слоя, установить FireBug (плагин для FireFox).

Если вы задаете размер шрифта для body в em, это приводит к глюкам при масштабировании в ie, используйте проценти для body и em в остальных случаях.

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

С тем, каким образом задается и наследуется em я ознакомлена.

Спасибо за участие :D

Link to comment
Share on other sites

  • 0
width="40.5" height="17.12" (в пикселях)

А че бывают дробные пиксели? не знал.

Таким образом задается размер векторного изображения. Откройте код любого и увидите. В графическом редакторе задается размер: 40X17px, а в коде файла это выглядит с долями, честно говоря, не знаю с чем это связанно, я не вдавалась в подробности внутренностей svg, хотя надо будет.

Link to comment
Share on other sites

  • 0

2 Nomo

Читайте сначала это

http://www.w3.org/TR/SVG/types.html#DataTypeLength

: A length is a distance measurement. The format of a is a optionally followed immediately by a unit identifier. (Note that the specification of a is different for property values than for XML attribute values.)

If the is expressed as a value without a unit identifier (e.g., 48), then the represents a distance in the current user coordinate system.

Потом это

http://www.w3.org/TR/SVG/coords.html#UnitIdentifiers

Теперь очччень внимательно это

http://www.w3.org/TR/SVG/struct.html#SVGElement

width = ""

For outermost 'svg' elements, the intrinsic width of the SVG document fragment. For embedded 'svg' elements, the width of the rectangular region into which the 'svg' element is placed.

A negative value is an error (see Error processing). A value of zero disables rendering of the element.

If the attribute is not specified, the effect is as if a value of "100%" were specified.

Animatable: yes.

height = ""

For outermost 'svg' elements, the intrinsic height of the SVG document fragment. For embedded 'svg' elements, the height of the rectangular region into which the 'svg' element is placed.

A negative value is an error (see Error processing). A value of zero disables rendering of the element.

If the attribute is not specified, the effect is as if a value of "100%" were specified.

Animatable: yes.

И наконец смотрите пример (Проверял в ИЕ 6 + SVGView и Опера 9)

http://www.w3.org/Graphics/SVG/Test/200612...-prof-01-f.html

Отсюда вывод задавайте или width="100%" height="100%" или вообще не задавайте высоту и ширину.

ЗЫ Это если я правильно понял постановку вопроса :D

Link to comment
Share on other sites

  • 0

Tokolist, Спасибо)) занятно, мне кажется что в последнее время я в спецификациях провожу большую часть времени), у меня туго с переводом....приходится все в автомат пихать(( В примере изображение не масштабируется, мне нужно найти где был бы грамотный пример с масштабируемой графикой. В спецификациях не смогла найти.

Если задать 100% то это будит размером во весь браузер в зависимости от разрешения монитора, ведь я из файла svg убрала размеры, он как-бы безразмерный, это сделано специально для того, чтобы изображение масштабировалось.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy