2013-05-21 19 views
19

Widziałem wiele przykładów użycia CSS do wpływania na styl elementów SVG, ale żadne z nich nie pomogło mi w pytaniu o markery. I szczerze, nadal pracuję nad składnią obu (SVG & CSS).Zmiana koloru znacznika SVG - CSS?

Chcę zdefiniować znacznik, a następnie móc go używać w różnych miejscach, ale w różnych kolorach.

Na przykład:

<?xml version="1.0" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
    viewBox="0 0 180 320"> 

<defs> 
    <marker class="AsteriskMarkerClass" id="AsteriskMarker" viewBox="-1 -1 2 2" stroke-width="0.1"> 
     <line x1="0" y1="-1" x2="0" y2="1" /> 
     <line x1="-1" y1="0" x2="1" y2="0" /> 
     <line x1="-0.7071" y1="-0.7071" x2="0.7071" y2="0.7071" /> 
     <line x1="-0.7071" y1="0.7071" x2="0.7071" y2="-0.7071" /> 
    </marker> 
</defs> 

.AsteriskMarkerClass { stroke:red; } 
    <path d="M 60,100" 
      stroke-width="10" 
      marker-start="url(#AsteriskMarker)" /> 

.AsteriskMarkerClass { color:green; } 
    <path d="M 90,140" 
      stroke-width="10" 
      marker-start="url(#AsteriskMarker)" /> 

</svg> 

Jeśli ktoś mógłby dać mi wskazówka, w jaki sposób może to zrobić, będę wdzięczny.

+2

Obecnie nie jest to możliwe, ale wydaje mi się, że rozważa się nadchodzącą specyfikację SVG 2. –

+0

Obecnie można używać javascript do klonowania i zmiany koloru dla każdego innego stylu znacznika. – cuixiping

Odpowiedz

22

Jak Robert napisał, że nie jest to możliwe w SVG 1.1:

Z SVG 1.1 spec:

Properties dziedziczą do markera „” elementu z jego przodków; Właściwości nie dziedziczą z elementu odwołującego się do elementu "znacznik" .

SVG2 nie pozwalają stwierdzić, że chcesz styl z elementem odwołującego:

Properties dziedziczą do markera „” elementu z jego przodków; Właściwości nie dziedziczą z elementu odwołującego się do elementu "znacznik" . Należy jednak pamiętać, że za pomocą wartości kontekstowego obrysu dla " " wypełnienia "lub" obrysu "elementów w jego definicji można zaprojektować pojedynczy znacznik, aby pasował do stylu elementu odwołującego się do znacznika.

Zobacz przykład 2 w this section specyfikacji, w jaki sposób można z niego korzystać. Zwróć uwagę, że jest to wersja robocza edytora i że składnia wciąż może się zmieniać. Implementacje context-fill i context-stroke nie są jeszcze we wszystkich przeglądarkach. Jeśli szukasz czegoś do przetestowania, wydaje się, że jest zaimplementowany z prefiksem (prawdopodobnie za flagą prefiksu, nie jestem dokładnie jasny na temat flagi, ale prawdopodobnie gfx.font_rendering.opentype_svg.enabled) w Firefox Nightlies, zobacz WG discussion here.

+0

Erik, Robert, bardzo dziękuję za odpowiedź. Nie jestem pewien, czy chcę być na krwawień z Firefox Nightlies. :) –

+1

Niestety jeszcze nie w Chrome: http://jsfiddle.net/2RNND/ https://code.google.com/p/chromium/issues/detail?id=278872 https://code.google.com/p/chromium/issues/detail? id = 367737 –