Definieren Sie Farben in der SVG

Wie definiere ich eine Farbe in eine SVG-Datei?

<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- define mycolor=red -->
    </defs> 

    <!-- use mycolor as fill -->
    <rect x="0" y="0" width="704" height="702" fill=mycolor/>
</svg>
InformationsquelleAutor multiholle | 2010-12-17
  1. 16

    Können Sie ein Stylesheet mit svg und die fill-Eigenschaft ist auch inhered von seinem übergeordneten element, vorausgesetzt, dass Sie nicht angeben. In dieser änderung, um Ihren code die Farbe ist rot. Wenn es nicht gegeben, die Farbe, die durch die .myfill Klasse wäre es Erben sich blau von der "G" Gruppen-tag.

    <?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">

<style>
.myfill { fill:red }
</style>

    <g fill="blue">
    <rect x="0" y="0" width="704" height="702" class="myfill" />
    </g>

</svg>
    InformationsquelleAutor Wayne
  2. 25

    Können Sie eine Farbe festlegen, die über einen Gradienten (<linearGradient - > oder <radialGradient - >), oder über die <solidColor> - element.

    In allen Fällen verwenden Sie Sie auf die gleiche Weise:

    <rect x="0" y="0" width="704" height="702" fill="url(#yourcolor)"/>

    Den Gradienten nur eine <stop> untergeordnete element mit der Farbe, die Sie wollen. Sie werden feststellen, dass verwenden von Farbverläufen hat eine bessere cross-browser-Unterstützung als solidColor an dieser Stelle.

    Einer Probe "gradient" Farbe definition:

    <linearGradient id="yourcolor">
  <stop stop-color="#991132"/>
</linearGradient>
    InformationsquelleAutor Erik Dahlström
Schreibe einen Kommentar