Експортираните от Illustrator .svg файлове няма да се рендират в HTML

Не съм сигурен дали това е съвпадение, но изглежда, че ако експортирам svg файлове от Illustrator или дори се опитам да използвам svg файлове, които намеря в мрежата, които са експортирани от Illustrator, те не се изобразяват.

Използвам кода по-долу, може би някой със задълбочени познания по svg и HTML може да ми каже какво може да не е наред с моя svg файл?

<!DOCTYPE html>
<html lang="en">
  <style>
    html {
      background-image: url(https://dl.dropboxusercontent.com/u/7146901/svgbkgnd%5B1%5D.svg);
      background-size: contain;
      height: 100%;
    }
  </style>
  <head>......</head>
</html>

Опитах кода по-горе и замених връзката към друг svg файл и той работи, така че предполагам, че нещо не е наред конкретно с моя svg файл?


svg html css adobe-illustrator
person mvcNewbie    schedule 13.05.2013    source източник
comment
Защо прилагате CSS към елемента html, а не към body?   -  person Oded    schedule 13.05.2013
comment
Искам фон за цялата страница, а не само за тялото. Независимо от това, маркирането по-горе работи с различни svg файлове, така че изглежда, че нещо не е наред с този файл и искам да се опитам да разбера какво е това, но нямам ни най-малка идея откъде да започна.   -  person mvcNewbie    schedule 13.05.2013
comment

да Можете да "повдигнете" (||) от булеви стойности към функции от нещо до булеви стойности. Значи искате нещо подобно

(||) :: Bool -> Bool -> Bool

да се превърне в

(||) :: (r -> Bool) -> (r -> Bool) -> (r -> Bool)

Това се оказва точно това, за което са подходящи приложните екземпляри на функциите.

liftA2      :: (a -> b -> c) -> (r -> a) -> (r -> b) -> (r -> c)

so

liftA2 (||) :: (r -> Bool) -> (r -> Bool) -> (r -> Bool)

което означава, че във вашия случай можете да напишете вашия филтър като

filter (liftA2 (||) (divides 3) (divides 5))

който взема цяло число и решава дали се дели на 3 или 5.

Ако искате, можете да дефинирате нещо подобно

(<||>) = liftA2 (||)

или, еквивалентно,

f <||> g = \x -> f x || g x

и след това можете да напишете вашия филтър като

filter (divisible 3 <||> divisible 5)

Опаковането на ъглови скоби около операторите е нещо като идиом за показване, че те са повдигнати в нещо друго (функтор, апликативен, моноид).

  -  person Oded    schedule 13.05.2013
comment
Считам, че това твърдение е неправилно. Използвах същото маркиране с изображения и други SVG файлове и се представи добре. Като тест също се опитах да го променя към тялото, но svg все още не се изобразява.   -  person mvcNewbie    schedule 13.05.2013
comment
@Oded: [ Отказ от отговорност - не съм css гуру. ] Доколкото разбирам, вие и mvcNewbie сте прави. Можете да добавите фоново изображение към html. Но също така сте прави, защото ако поставите вашето фоново изображение в тялото и то ще се издигне до пълния прозорец за изглед на html, стига да не посочите и фонов цвят в тялото. Кажете ми, ако греша...Обичам да уча! :)   -  person markE    schedule 14.05.2013

Отговори (1)


arrow_upward
1
arrow_downward

Работи според очакванията. Вижте http://jsfiddle.net/PA8zn/show Тук съм включил SVG в HTML елемента :

html {
    background: url(https://dl.dropboxusercontent.com/u/7146901/svgbkgnd%5B1%5D.svg) no-repeat;

}

SVG е много тежък файл, така че отнема доста време, за да се покаже. Можете да опитате да го почистите, за да подобрите производителността. Или на ръка, или с инструмент като Scour: http://codedread.com/scour/

person David Storey    schedule 13.05.2013
comment
Същото като вашия резултат, показва се добре на IE10/win7--бавно зареждане обаче. - person markE; 14.05.2013
comment
Благодаря много за jsfiddle dstorey, занимавах се с него цял ден и вашият прост пример помогна, може би можеше да е част от начина, по който обслужвах съдържанието. - person mvcNewbie; 14.05.2013