Стиль и круг SVG внутри <use> без использования символа *?

Я использую элемент <use>, чтобы показать дубликаты SVG. Моя проблема в том, что я хочу создать определенную часть SVG, в настоящее время я делаю: .spinner svg * {...}, я использую catch-all *, потому что я не могу найти элемент, который я должен фокусировать.Стиль и круг SVG внутри <use> без использования символа *?

Я пробовал .spinner svg circle {...} и все остальные комбинации, но ничего не работает.

Если стиль работает, чем внутренний круг заполняет розовый.

Так что для ясности .spinner svg * {...} работает, но поскольку я хочу добавить больше к этому SVG, я больше не могу его использовать и хочу напрямую нацелить элемент окружности. Как я могу это сделать?

.spinner 
 
{ 
 
    display: inline-block; 
 

 
    width: 3rem; 
 
    height: 3rem; 
 

 
    -webkit-animation: container 1568ms linear infinite; 
 
      animation: container 1568ms linear infinite; 
 
} 
 

 
.spinner svg 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 

 
    -webkit-animation: svg-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite; 
 
      animation: svg-spin 5332ms cubic-bezier(.4, 0, .2, 1) infinite; 
 

 
    stroke: #fd75c5; 
 
} 
 

 
.spinner svg * 
 
{ 
 
    transition: stroke 133ms linear; 
 
    -webkit-animation: circle-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite; 
 
      animation: circle-spin 1333ms cubic-bezier(.4, 0, .2, 1) infinite; 
 

 
    fill: transparent; 
 
    stroke-width: .2rem; 
 

 
    fill: pink; 
 
} 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
@-webkit-keyframes container 
 
{ 
 
    100% 
 
    { 
 
     -webkit-transform: rotate(360deg); 
 
       transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes container 
 
{ 
 
    100% 
 
    { 
 
     -webkit-transform: rotate(360deg); 
 
       transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes svg-spin 
 
{ 
 
    12.5% 
 
    { 
 
     -webkit-transform: rotate(135deg); 
 
       transform: rotate(135deg); 
 
    } 
 

 
    25% 
 
    { 
 
     -webkit-transform: rotate(270deg); 
 
       transform: rotate(270deg); 
 
    } 
 

 
    37.5% 
 
    { 
 
     -webkit-transform: rotate(405deg); 
 
       transform: rotate(405deg); 
 
    } 
 

 
    50% 
 
    { 
 
     -webkit-transform: rotate(540deg); 
 
       transform: rotate(540deg); 
 
    } 
 

 
    62.5% 
 
    { 
 
     -webkit-transform: rotate(675deg); 
 
       transform: rotate(675deg); 
 
    } 
 

 
    75% 
 
    { 
 
     -webkit-transform: rotate(810deg); 
 
       transform: rotate(810deg); 
 
    } 
 

 
    87.5% 
 
    { 
 
     -webkit-transform: rotate(945deg); 
 
       transform: rotate(945deg); 
 
    } 
 

 
    100% 
 
    { 
 
     -webkit-transform: rotate(1080deg); 
 
       transform: rotate(1080deg); 
 
    } 
 
} 
 

 
@keyframes svg-spin 
 
{ 
 
    12.5% 
 
    { 
 
     -webkit-transform: rotate(135deg); 
 
       transform: rotate(135deg); 
 
    } 
 

 
    25% 
 
    { 
 
     -webkit-transform: rotate(270deg); 
 
       transform: rotate(270deg); 
 
    } 
 

 
    37.5% 
 
    { 
 
     -webkit-transform: rotate(405deg); 
 
       transform: rotate(405deg); 
 
    } 
 

 
    50% 
 
    { 
 
     -webkit-transform: rotate(540deg); 
 
       transform: rotate(540deg); 
 
    } 
 

 
    62.5% 
 
    { 
 
     -webkit-transform: rotate(675deg); 
 
       transform: rotate(675deg); 
 
    } 
 

 
    75% 
 
    { 
 
     -webkit-transform: rotate(810deg); 
 
       transform: rotate(810deg); 
 
    } 
 

 
    87.5% 
 
    { 
 
     -webkit-transform: rotate(945deg); 
 
       transform: rotate(945deg); 
 
    } 
 

 
    100% 
 
    { 
 
     -webkit-transform: rotate(1080deg); 
 
       transform: rotate(1080deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes circle-spin 
 
{ 
 
    0% 
 
    { 
 
     stroke-dasharray: 5 120; 
 
     stroke-dashoffset: 5; 
 
    } 
 

 
    50% 
 
    { 
 
     stroke-dasharray: 100 25; 
 
     stroke-dashoffset: 50; 
 
    } 
 

 
    100% 
 
    { 
 
     stroke-dasharray: 5 120; 
 
     stroke-dashoffset: 5; 
 
    } 
 
} 
 

 
@keyframes circle-spin 
 
{ 
 
    0% 
 
    { 
 
     stroke-dasharray: 5 120; 
 
     stroke-dashoffset: 5; 
 
    } 
 

 
    50% 
 
    { 
 
     stroke-dasharray: 100 25; 
 
     stroke-dashoffset: 50; 
 
    } 
 

 
    100% 
 
    { 
 
     stroke-dasharray: 5 120; 
 
     stroke-dashoffset: 5; 
 
    } 
 
}

<svg style="display:none"> 
 
\t <defs> 
 
\t \t <symbol id="loader" viewBox="0 0 50 50"> 
 
\t \t \t <circle cx="25" cy="25" r="20" /> 
 
\t \t </symbol> 
 
\t </defs> 
 
</svg> 
 

 

 

 
<div class="spinner"> 
 
\t <svg><use xlink:href="#loader"></svg> 
 
</div>

источник

2017-01-28 ditto

Клонировать элементы, которые вы хотите, вместо того, чтобы использовать их так, чтобы они не были предназначены для поддержки. –

Вы не можете стилизовать круг через SVG, который ссылается на нее. Вы можете думать об этом, потому что символ не существует под <div class="spinner"><use>, поэтому вы не можете его стиль.

Что вы можете сделать, это стиль с помощью символа. Например:

#loader circle { 
    fill: pink; 
}

Но что изменит все ссылки на #loader. Если вам нужно иметь несколько разных прядильщиков по-разному, тогда вам нужно иметь отдельные копии символа прядильщика.

источник

2017-01-29 09:06:00

Стиль и круг SVG внутри <use> без использования символа *?

ответ

Смежные вопросы