Один SVG-файл, много SVG-градиентов внутри - PullRequest
Новая
       8

Один SVG-файл, много SVG-градиентов внутри

8 голосов
/ 19 июня 2010

Я делаю набор кнопок, которые используют динамические градиенты.Я позаботился о Firefox 3.6+ и WebKit, используя их собственные CSS-расширения, и все, что мне нужно сделать, - это поддержать Opera, iOS и IE9, используя background-image: url ("Gradient.svg").

Это относительно просто, я сделал SVG-файл, связал его и заставил работать.Однако я делаю набор, поэтому мне нужно как минимум 6 градиентов.Когда я обычно делаю это в изображениях, я создаю спрайт для быстрого доступа по HTTP.Я не уверен, как добиться этого в SVG - могу ли я использовать один файл и обращаться к разным частям его XML с помощью #identifiers, как это делает XBL?

Мой текущий 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>

И тогда у меня есть CSS: 

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

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

Я хочу сделать что-то вроде этого: 

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

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

Возможно ли это вообще?Можете ли вы помочь мне?Я действительно не хочу выдвигать 6 файлов XML, когда я могу сделать это с одним.

Ответы [ 3 ]

1 голос
/ 11 октября 2010

Если вы просто хотите использовать градиенты для фона кнопок, большая часть этого может быть получена в CSS. Для остальных браузеров ie6 + может использовать пользовательские фильтры ms: http://msdn.microsoft.com/en-us/library/ms532847.aspx

iOS использует webkit для рендеринга, поэтому вы можете использовать префикс -webkit vendor. К сожалению, вам все еще понадобится svg для Opera, но это может упростить его (или просто использовать обычный спрайт изображений для 1% пользователей Opera)

0 голосов
/ 03 мая 2011

Что вы можете сделать, это сначала загрузить файл SVG, содержащий все определения, а затем загрузить другие файлы SVG.

Использование Firefox, jQuery SVG и небольшой кадр фреймворка ...

в вашем XHTML: 

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

в вашем 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);} });
      }
    }

Поскольку идентификатор может быть найден в области действия документов, SVG может найти ссылку на IRI.

Это позволяет вам определять вещи один раз (которые иначе не были бы определены в css) и избегать коллизий идентификаторов.

Ура, Кристофер Смитсон

0 голосов
/ 19 июня 2010

в теории - согласно документации SVG # Params это возможно. Вы можете использовать 2 параметра для настройки обоих цветов, вы можете создать несколько ритов с разными градиентами, высоту установить на 0, а затем сделать только один 100% (как? Градиент2 = 100%)

...