Jeden plik SVG, wiele gradientów SVG wewnątrz

Question

Tworzę zestaw przycisków z dynamicznymi gradientami. Zadbałem o Firefoksa 3.6+ i WebKit, używając zastrzeżonych rozszerzeń CSS, a wszystko, co muszę zrobić, to obsługa Opera, iOS i IE9 za pomocą background-image: url ("gradient.svg").

Jest to stosunkowo łatwe, zrobiłem plik SVG, połączyłem go i uruchomiłem. Jednak robię zestaw, więc potrzebuję co najmniej 6 gradientów. Kiedy normalnie robię to na obrazach, tworzę ikonkę dla szybkiego dostępu HTTP. Nie jestem pewien, jak to osiągnąć w SVG - czy mogę użyć jednego pliku i uzyskać dostęp do różnych części jego kodu XML za pomocą #identifiers, takich jak XBL?

Mój obecny SVG:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <linearGradient id="select-gradient" x1="0" x2="0" y1="0" y2="1"> 
      <stop offset="0%" stop-color="rgb(231,244,248)"/> 
      <stop offset="100%" stop-color="rgb(207,233,241)"/> 
     </linearGradient> 
     <style type="text/css"> 
      rect { 
      fill: url(#select-gradient); 
      } 
     </style> 
    </defs> 
    <rect x="0" y="0" rx="6" ry="6" height="100%" width="100%"/> 
</svg> 

A potem mam CSS:

.button-1 { 
    background-image: url("gradient-1.svg"); 
} 

.button-2 { 
    background-image: url("gradient-2.svg"); 
} 

chcę zrobić coś takiego:

.button-1 { 
    background-image: url("gradient.svg#gradient1"); 
} 

.button-2 { 
    background-image: url("gradient.svg#gradient2"); 
} 

Czy to w ogóle możliwe? Czy możesz mi pomóc? Naprawdę nie chcę wypychać 6 plików XML, kiedy mogę to zrobić za pomocą jednego.

Answer 1

w teorii - zgodnie z SVG documentation #Params jest to możliwe. Możesz użyć dwóch par dla ustawienia obu kolorów, możesz utworzyć wiele rectów z różnymi gradientami, wysokość ustawić na 0, a następnie zrobić tylko jeden 100% (jak? Gradient2 = 100%)

Answer 2

Jeśli chcesz tylko gradienty dla przycisku tła, większość tego można osiągnąć w css. Dla pozostałych przeglądarek, ie6 + może filtrów użytkownika ms: http://msdn.microsoft.com/en-us/library/ms532847.aspx

iOS używa renderowania webkita, więc możesz użyć prefiksu -webkit dostawcy. Niestety nadal będziesz potrzebować svg do opery, ale może to ułatwić (lub po prostu użyć normalnego obrazka dla 1% użytkowników opery)

Answer 3

Co możesz zrobić, to załadować plik SVG, który zawiera wszystkie definicje po raz pierwszy , a następnie załaduj swoje pozostałe pliki SVG.

Korzystanie Firefox jQuery SVG oraz niewielką strzał ram ...

w XHTML:

<div id="common_svg_defs"><!--ieb--></div> 
    <div id="first_thing"><!--ieb--></div> 
    <div id="second_thing"><!--ieb--></div> 

w javascript:

var do_stuff = function() 
    { 
     // load your common svg file with this goo. 
     $('#common_svg_defs').svg({ 
     loadURL: 'path/filename.svg', 
     onLoad: function(svg, error) { run_test(svg, error);} }); 
    } 

    var run_test = function(svg, error) 
    { 
     if (typeof(error) !== "undefined") 
     { 
     if (typeof(console.log) !== "undefined") 
     { 
      console.log(error); 
     } 
     } 
     else 
     { 
     // load your other svg files here, or just 
     // set a flag letting you know it's ready. 
     $('#first_thing').svg({ 
      loadURL: 'path/anotherfilename.svg', 
      onLoad: function(svg, error) { somecallback(svg, error);} }); 
     $('#second_thing').svg({ 
      loadURL: 'path/anotherfilename.svg', 
      onLoad: function(svg, error) { somecallback(svg, error);} }); 
     } 
    } 

Ponieważ id można znaleźć w zakresie dokumentów SVG są w stanie znaleźć referencje IRI.

Umożliwia to zdefiniowanie rzeczy jeden raz (inaczej nie zdefiniowano by tego w css) i uniknięcie kolizji identyfikatora.

Pozdrawiam, Christopher Smithson