Partage

Colorer un SVG avec du CSS

Sujet résolu
2 janvier 2018 à 12:12:11

Bonjour à tous,

Je cherche à remplacer une carte de France sur mon site qui est à la base une image comportant 2 cartes de France le titre et les légendes, par quelque chose de plus agréable à la vue, soit une carte de France SVG.

Je souhaite donc colorer les départements avec du CSS mais je bloque dessus.

Chaque département est constitué de 2 éléments path (contenu et bordure) contenus dans une balise <g> dont le nom de classe est le numéro et nom du département et les départements sont groupés en régions (les anciennes) avec des balises <g> dont la classe à le nom du département. Voici à quoi ressemble le SVG (je ne vous le met que partiellement):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0, 0, 507.081, 553.043">
    <path d="M432,545.25 L432,475 L496.25,433" fill-opacity="0" stroke="#86AAE0" stroke-width="1.5" class="corsica_separating_line"/>
    <g class="Provence-Alpes-Côte-dAzur">
      <g class="84-Vaucluse">
        <path d="M387,381.344 L384.25,381.562 L382.125,384.875 L382.688,388.375 L386,388.781 L385.438,390.344 L382.875,390.531 L379.969,393.469 L379.188,392.5 L379.75,388.594 L378.594,387.219 L373.312,388 L372.281,390.094 L372.844,390.406 L376.156,395.906 L376.156,400.344 L381.969,406.125 L381.969,408.625 L379.719,409.906 L379.875,409.969 L386.938,412.969 L389.938,416.312 L391.375,418.281 L395.25,420.031 L399.844,419.875 L407.438,423.031 L411.688,423.562 L417,422.344 L419.188,420.625 L419.469,419.156 L415.406,414.562 L410.969,414.562 L410.969,412.969 L412.562,411.188 L412.562,409.25 L409.031,407.5 L408.688,404.656 L410.625,403.781 L410.625,401.312 L408.5,400.938 L408.344,398.281 L408.312,398.094 L406.531,397.969 L403.594,395.812 L402.812,393.281 L397.344,392.875 L393.25,392.5 L392.844,390.156 L394.219,387.219 L391.688,389.375 L387.781,388.969 L387,387.594 L389.719,383.906 L387,381.344 z" fill="#86AAE0"/>
        <path d="M387,381.344 L384.25,381.562 L382.125,384.875 L382.688,388.375 L386,388.781 L385.438,390.344 L382.875,390.531 L379.969,393.469 L379.188,392.5 L379.75,388.594 L378.594,387.219 L373.312,388 L372.281,390.094 L372.844,390.406 L376.156,395.906 L376.156,400.344 L381.969,406.125 L381.969,408.625 L379.719,409.906 L379.875,409.969 L386.938,412.969 L389.938,416.312 L391.375,418.281 L395.25,420.031 L399.844,419.875 L407.438,423.031 L411.688,423.562 L417,422.344 L419.188,420.625 L419.469,419.156 L415.406,414.562 L410.969,414.562 L410.969,412.969 L412.562,411.188 L412.562,409.25 L409.031,407.5 L408.688,404.656 L410.625,403.781 L410.625,401.312 L408.5,400.938 L408.344,398.281 L408.312,398.094 L406.531,397.969 L403.594,395.812 L402.812,393.281 L397.344,392.875 L393.25,392.5 L392.844,390.156 L394.219,387.219 L391.688,389.375 L387.781,388.969 L387,387.594 L389.719,383.906 L387,381.344 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="0.6"/>
      </g>
      <g class="83-Var">
        <path d="M457.781,413.188 L454.812,413.312 L453.406,414.75 L448.094,414.562 L443.5,417.906 L440.344,415.781 L435.375,417.375 L434.5,419.156 L430.969,421.812 L424.594,417.562 L419.438,419.25 L419.188,420.625 L419.281,420.562 L422.469,422.688 L418.219,425.531 L416.469,429.062 L418.594,430.812 L418.406,434.531 L421.781,437.719 L420.875,438.438 L417,438.25 L417,439.656 L418.75,440.531 L418.75,441.062 L417.156,442.5 L418.062,443.562 L419.469,443.562 L420.875,444.969 L421.062,446.031 L419.281,447.094 L417.875,448.688 L417.688,452.562 L418.219,453.281 L421.719,454.844 L422.688,458.75 L424.844,459.156 L426.812,457.781 L430.312,455.625 L436.375,456.219 L436.188,457.781 L434.219,458.75 L438.906,458.969 L437.75,457.781 L437.344,455.25 L439.875,453.5 L442.812,454.469 L444,454.844 L444.969,456.031 L446.344,455.062 L446.719,452.5 L448.281,451.156 L452.375,451.156 L453.562,449.375 L456.281,450.156 L459.406,448.812 L459.406,443.719 L455.312,443.906 L458.438,441.969 L460,439.812 L460.406,436.688 L466.062,435.906 L469.219,432.375 L467.031,430.125 L467.031,428.875 L465.969,427.812 L467.375,426.594 L467.031,424.625 L464.719,423.75 L463.5,423.75 L461.375,421.625 L461,417.906 L458.719,416.844 L456.406,416.688 L455.531,414.562 L457.781,413.188 z" fill="#86AAE0"/>
        <path d="M457.781,413.188 L454.812,413.312 L453.406,414.75 L448.094,414.562 L443.5,417.906 L440.344,415.781 L435.375,417.375 L434.5,419.156 L430.969,421.812 L424.594,417.562 L419.438,419.25 L419.188,420.625 L419.281,420.562 L422.469,422.688 L418.219,425.531 L416.469,429.062 L418.594,430.812 L418.406,434.531 L421.781,437.719 L420.875,438.438 L417,438.25 L417,439.656 L418.75,440.531 L418.75,441.062 L417.156,442.5 L418.062,443.562 L419.469,443.562 L420.875,444.969 L421.062,446.031 L419.281,447.094 L417.875,448.688 L417.688,452.562 L418.219,453.281 L421.719,454.844 L422.688,458.75 L424.844,459.156 L426.812,457.781 L430.312,455.625 L436.375,456.219 L436.188,457.781 L434.219,458.75 L438.906,458.969 L437.75,457.781 L437.344,455.25 L439.875,453.5 L442.812,454.469 L444,454.844 L444.969,456.031 L446.344,455.062 L446.719,452.5 L448.281,451.156 L452.375,451.156 L453.562,449.375 L456.281,450.156 L459.406,448.812 L459.406,443.719 L455.312,443.906 L458.438,441.969 L460,439.812 L460.406,436.688 L466.062,435.906 L469.219,432.375 L467.031,430.125 L467.031,428.875 L465.969,427.812 L467.375,426.594 L467.031,424.625 L464.719,423.75 L463.5,423.75 L461.375,421.625 L461,417.906 L458.719,416.844 L456.406,416.688 L455.531,414.562 L457.781,413.188 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="0.6"/>
      </g>
      <g class="13-Bouches-du-Rhône">
        <path d="M379.719,409.906 L374.25,413.031 L372.844,423.531 L367.062,422.719 L365.406,427.125 L366.781,429.062 L360.438,432.938 L358.688,437 L364.875,437.281 L373.094,437.875 L374.656,439.438 L371.719,439.438 L369.781,442.75 L378.156,444.5 L384.812,443.344 L381.281,440 L383.625,438.062 L387.344,439.625 L389.094,443.344 L400.25,443.531 L403.156,442.344 L403.75,444.125 L400.625,446.844 L404.938,447.031 L404.156,449 L402.969,450.375 L412.531,450.375 L417.219,451.938 L417.688,452.562 L417.875,448.688 L419.281,447.094 L421.062,446.031 L420.875,444.969 L419.469,443.562 L418.062,443.562 L417.156,442.5 L418.75,441.062 L418.75,440.531 L417,439.656 L417,438.25 L420.875,438.438 L421.781,437.719 L418.406,434.531 L418.594,430.812 L416.469,429.062 L418.219,425.531 L422.469,422.688 L419.281,420.562 L417,422.344 L411.688,423.562 L407.438,423.031 L399.844,419.875 L395.25,420.031 L391.375,418.281 L389.938,416.312 L386.938,412.969 L379.875,409.969 L379.719,409.906 z" fill="#86AAE0"/>
        <path d="M379.719,409.906 L374.25,413.031 L372.844,423.531 L367.062,422.719 L365.406,427.125 L366.781,429.062 L360.438,432.938 L358.688,437 L364.875,437.281 L373.094,437.875 L374.656,439.438 L371.719,439.438 L369.781,442.75 L378.156,444.5 L384.812,443.344 L381.281,440 L383.625,438.062 L387.344,439.625 L389.094,443.344 L400.25,443.531 L403.156,442.344 L403.75,444.125 L400.625,446.844 L404.938,447.031 L404.156,449 L402.969,450.375 L412.531,450.375 L417.219,451.938 L417.688,452.562 L417.875,448.688 L419.281,447.094 L421.062,446.031 L420.875,444.969 L419.469,443.562 L418.062,443.562 L417.156,442.5 L418.75,441.062 L418.75,440.531 L417,439.656 L417,438.25 L420.875,438.438 L421.781,437.719 L418.406,434.531 L418.594,430.812 L416.469,429.062 L418.219,425.531 L422.469,422.688 L419.281,420.562 L417,422.344 L411.688,423.562 L407.438,423.031 L399.844,419.875 L395.25,420.031 L391.375,418.281 L389.938,416.312 L386.938,412.969 L379.875,409.969 L379.719,409.906 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="0.6"/>
      </g>
      <g class="06-Alpes-Maritimes">
        <path d="M463.906,381.875 L463.5,382.031 L460.844,383.438 L460.656,385.906 L458.719,387.5 L457.656,390 L456.938,394.594 L459.062,397.75 L459.25,400.406 L460.469,400.781 L464.031,404.125 L467.375,407.125 L465.969,408.031 L463.844,406.594 L461.188,408.031 L460.469,408.906 L457.656,408.906 L458,410.312 L457.125,411.375 L457.844,413.156 L455.531,414.562 L456.406,416.688 L458.719,416.844 L461,417.906 L461.375,421.625 L463.5,423.75 L464.719,423.75 L467.031,424.625 L467.375,426.594 L465.969,427.812 L467.031,428.875 L467.031,430.125 L469.219,432.375 L469.375,432.188 L469.562,427.719 L473.469,428.5 L474.844,426.719 L476.812,427.125 L477,421.062 L481.5,420.688 L485.406,417.156 L488.906,417.156 L489.094,415 L492.625,412.875 L490.656,408.375 L493.594,405.844 L493,402.906 L497.312,401.531 L498.469,397.25 L497.906,394.312 L496.906,392.562 L496.125,390 L493.219,390.219 L484.031,393.531 L481.094,393.531 L476.031,389.438 L470.938,388.062 L468,388.062 L468,384.531 L463.906,382 L463.906,381.875 z" fill="#86AAE0"/>
        <path d="M463.906,381.875 L463.5,382.031 L460.844,383.438 L460.656,385.906 L458.719,387.5 L457.656,390 L456.938,394.594 L459.062,397.75 L459.25,400.406 L460.469,400.781 L464.031,404.125 L467.375,407.125 L465.969,408.031 L463.844,406.594 L461.188,408.031 L460.469,408.906 L457.656,408.906 L458,410.312 L457.125,411.375 L457.844,413.156 L455.531,414.562 L456.406,416.688 L458.719,416.844 L461,417.906 L461.375,421.625 L463.5,423.75 L464.719,423.75 L467.031,424.625 L467.375,426.594 L465.969,427.812 L467.031,428.875 L467.031,430.125 L469.219,432.375 L469.375,432.188 L469.562,427.719 L473.469,428.5 L474.844,426.719 L476.812,427.125 L477,421.062 L481.5,420.688 L485.406,417.156 L488.906,417.156 L489.094,415 L492.625,412.875 L490.656,408.375 L493.594,405.844 L493,402.906 L497.312,401.531 L498.469,397.25 L497.906,394.312 L496.906,392.562 L496.125,390 L493.219,390.219 L484.031,393.531 L481.094,393.531 L476.031,389.438 L470.938,388.062 L468,388.062 L468,384.531 L463.906,382 L463.906,381.875 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="0.6"/>
      </g>
      <g class="05-Hautes-Alpes">
        <path d="M447.344,339.156 L445.594,339.938 L445.188,342.875 L441.688,343.281 L441.094,340.531 L439.938,339.375 L436.406,339.75 L435.031,340.938 L434.25,345.031 L434.844,346 L438.938,346.406 L439.719,348.938 L441.281,349.719 L441.281,354 L437.562,353.812 L436,355.562 L431.531,354.781 L429,356.938 L427.219,356.156 L424.688,358.125 L425.656,359.875 L424.094,361.438 L419.219,361.438 L419.219,363.781 L420.781,364.562 L420.188,365.938 L416.875,367.281 L412.781,367.688 L411.594,371.406 L411.406,373.75 L413.562,375.5 L411.406,378.031 L408.688,376.656 L405.562,376.469 L405.156,378.219 L407.125,379.594 L404.75,381.156 L405.562,384.469 L412.188,386.25 L413.375,388.781 L415.312,389.156 L414.656,395.25 L414.688,395.281 L417.688,392.469 L421.25,392.469 L422.656,393.344 L424.594,392.625 L421.594,389.281 L421.062,387.688 L422.125,387.5 L424.062,389.281 L425.312,389.281 L425.125,386.438 L423.875,386.094 L424.406,384.344 L426.531,380.781 L429.906,378.844 L431.5,378.5 L431.5,376.719 L432.562,376.719 L434.5,378.312 L434.5,379.562 L437.844,381.688 L438.75,381.312 L438.219,377.969 L437.312,377.969 L438.219,376.719 L441.906,376.906 L443.875,375.5 L446.875,377.094 L453.219,377.25 L454.281,374.594 L455,373.531 L455,371.594 L457.656,371.438 L458.719,369.312 L461.719,367.531 L463.844,364.344 L466.375,364.469 L468.219,362.469 L470.344,362.656 L470.344,360.906 L467.625,359.531 L467.031,353.875 L464.875,353.094 L462.156,353.5 L457.062,350.938 L456.281,345.094 L453.375,344.125 L452.375,342.156 L451.094,339.344 L447.344,339.156 z" fill="#86AAE0"/>
        <path d="M447.344,339.156 L445.594,339.938 L445.188,342.875 L441.688,343.281 L441.094,340.531 L439.938,339.375 L436.406,339.75 L435.031,340.938 L434.25,345.031 L434.844,346 L438.938,346.406 L439.719,348.938 L441.281,349.719 L441.281,354 L437.562,353.812 L436,355.562 L431.531,354.781 L429,356.938 L427.219,356.156 L424.688,358.125 L425.656,359.875 L424.094,361.438 L419.219,361.438 L419.219,363.781 L420.781,364.562 L420.188,365.938 L416.875,367.281 L412.781,367.688 L411.594,371.406 L411.406,373.75 L413.562,375.5 L411.406,378.031 L408.688,376.656 L405.562,376.469 L405.156,378.219 L407.125,379.594 L404.75,381.156 L405.562,384.469 L412.188,386.25 L413.375,388.781 L415.312,389.156 L414.656,395.25 L414.688,395.281 L417.688,392.469 L421.25,392.469 L422.656,393.344 L424.594,392.625 L421.594,389.281 L421.062,387.688 L422.125,387.5 L424.062,389.281 L425.312,389.281 L425.125,386.438 L423.875,386.094 L424.406,384.344 L426.531,380.781 L429.906,378.844 L431.5,378.5 L431.5,376.719 L432.562,376.719 L434.5,378.312 L434.5,379.562 L437.844,381.688 L438.75,381.312 L438.219,377.969 L437.312,377.969 L438.219,376.719 L441.906,376.906 L443.875,375.5 L446.875,377.094 L453.219,377.25 L454.281,374.594 L455,373.531 L455,371.594 L457.656,371.438 L458.719,369.312 L461.719,367.531 L463.844,364.344 L466.375,364.469 L468.219,362.469 L470.344,362.656 L470.344,360.906 L467.625,359.531 L467.031,353.875 L464.875,353.094 L462.156,353.5 L457.062,350.938 L456.281,345.094 L453.375,344.125 L452.375,342.156 L451.094,339.344 L447.344,339.156 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="0.6"/>
      </g>
      <g class="04-Alpes-de-Haute-Provence">
        <path d="M463.844,364.344 L461.719,367.531 L458.719,369.312 L457.656,371.438 L455,371.594 L455,373.531 L454.281,374.594 L453.219,377.25 L446.875,377.094 L443.875,375.5 L441.906,376.906 L438.219,376.719 L437.312,377.969 L438.219,377.969 L438.75,381.312 L437.844,381.688 L434.5,379.562 L434.5,378.312 L432.562,376.719 L431.5,376.719 L431.5,378.5 L429.906,378.844 L426.531,380.781 L424.406,384.344 L423.875,386.094 L425.125,386.438 L425.312,389.281 L424.062,389.281 L422.125,387.5 L421.062,387.688 L421.594,389.281 L424.594,392.625 L422.656,393.344 L421.25,392.469 L417.688,392.469 L414.688,395.281 L414.656,395.25 L414.531,396.406 L413.375,395.031 L411.812,393.656 L410.812,396.594 L409.062,398.156 L408.312,398.094 L408.344,398.281 L408.5,400.938 L410.625,401.312 L410.625,403.781 L408.688,404.656 L409.031,407.5 L412.562,409.25 L412.562,411.188 L410.969,412.969 L410.969,414.562 L415.406,414.562 L419.469,419.156 L419.438,419.25 L424.594,417.562 L430.969,421.812 L434.5,419.156 L435.375,417.375 L440.344,415.781 L443.5,417.906 L448.094,414.562 L453.406,414.75 L454.812,413.312 L457.781,413.188 L457.844,413.156 L457.125,411.375 L458,410.312 L457.656,408.906 L460.469,408.906 L461.188,408.031 L463.844,406.594 L465.969,408.031 L467.375,407.125 L464.031,404.125 L460.469,400.781 L459.25,400.406 L459.062,397.75 L456.938,394.594 L457.656,390 L458.719,387.5 L460.656,385.906 L460.844,383.438 L463.5,382.031 L463.906,381.875 L463.906,378.094 L466.656,377.719 L465.094,376.344 L463.125,375.75 L462.156,373.219 L462.938,371.469 L466.438,367.75 L465.875,365 L466.375,364.469 L463.844,364.344 z" fill="#86AAE0"/>
        <path d="M463.844,364.344 L461.719,367.531 L458.719,369.312 L457.656,371.438 L455,371.594 L455,373.531 L454.281,374.594 L453.219,377.25 L446.875,377.094 L443.875,375.5 L441.906,376.906 L438.219,376.719 L437.312,377.969 L438.219,377.969 L438.75,381.312 L437.844,381.688 L434.5,379.562 L434.5,378.312 L432.562,376.719 L431.5,376.719 L431.5,378.5 L429.906,378.844 L426.531,380.781 L424.406,384.344 L423.875,386.094 L425.125,386.438 L425.312,389.281 L424.062,389.281 L422.125,387.5 L421.062,387.688 L421.594,389.281 L424.594,392.625 L422.656,393.344 L421.25,392.469 L417.688,392.469 L414.688,395.281 L414.656,395.25 L414.531,396.406 L413.375,395.031 L411.812,393.656 L410.812,396.594 L409.062,398.156 L408.312,398.094 L408.344,398.281 L408.5,400.938 L410.625,401.312 L410.625,403.781 L408.688,404.656 L409.031,407.5 L412.562,409.25 L412.562,411.188 L410.969,412.969 L410.969,414.562 L415.406,414.562 L419.469,419.156 L419.438,419.25 L424.594,417.562 L430.969,421.812 L434.5,419.156 L435.375,417.375 L440.344,415.781 L443.5,417.906 L448.094,414.562 L453.406,414.75 L454.812,413.312 L457.781,413.188 L457.844,413.156 L457.125,411.375 L458,410.312 L457.656,408.906 L460.469,408.906 L461.188,408.031 L463.844,406.594 L465.969,408.031 L467.375,407.125 L464.031,404.125 L460.469,400.781 L459.25,400.406 L459.062,397.75 L456.938,394.594 L457.656,390 L458.719,387.5 L460.656,385.906 L460.844,383.438 L463.5,382.031 L463.906,381.875 L463.906,378.094 L466.656,377.719 L465.094,376.344 L463.125,375.75 L462.156,373.219 L462.938,371.469 L466.438,367.75 L465.875,365 L466.375,364.469 L463.844,364.344 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="0.6"/>
      </g>
    </g>
    <g class="Corse">
      <g class="2B-Haute-Corse">
        <path d="M477.963,449.894 L475.026,451.862 L475.432,453.8 L476.995,455.769 L475.245,457.112 L476.026,458.675 L474.838,460.05 L474.838,461.8 L476.807,463.581 L476.807,466.3 L475.62,468.831 L474.276,469.425 L472.713,467.269 L469.963,467.487 L469.37,467.081 L467.026,467.081 L464.901,469.05 L464.088,472.362 L459.026,473.331 L455.12,476.644 L454.338,478.8 L452.401,478.612 L451.401,477.425 L450.838,480.769 L449.463,481.331 L449.057,484.456 L449.651,485.831 L447.495,487.394 L446.901,488.956 L449.088,489.362 L449.463,490.425 L453.338,490.425 L454.401,491.112 L457.245,490.581 L458.463,491.3 L457.932,492.175 L459.87,494.831 L463.588,494.831 L464.495,497.487 L467.12,497.487 L466.963,499.081 L469.088,501.737 L470.151,502.269 L471.557,503.144 L471.557,506.519 L472.62,507.394 L474.745,507.394 L475.276,508.269 L475.62,513.05 L476.87,513.925 L476.338,514.644 L476.682,517.456 L480.745,517.3 L484.151,515.05 L484.026,509.269 L488.713,502.644 L488.713,491.706 L486.776,487.987 L486.182,476.269 L484.807,474.112 L482.276,472.175 L481.87,464.925 L483.057,461.612 L481.495,456.331 L480.526,452.05 L479.713,450.862 L477.963,449.894 z" fill="#86AAE0"/>
        <path d="M477.963,449.894 L475.026,451.862 L475.432,453.8 L476.995,455.769 L475.245,457.112 L476.026,458.675 L474.838,460.05 L474.838,461.8 L476.807,463.581 L476.807,466.3 L475.62,468.831 L474.276,469.425 L472.713,467.269 L469.963,467.487 L469.37,467.081 L467.026,467.081 L464.901,469.05 L464.088,472.362 L459.026,473.331 L455.12,476.644 L454.338,478.8 L452.401,478.612 L451.401,477.425 L450.838,480.769 L449.463,481.331 L449.057,484.456 L449.651,485.831 L447.495,487.394 L446.901,488.956 L449.088,489.362 L449.463,490.425 L453.338,490.425 L454.401,491.112 L457.245,490.581 L458.463,491.3 L457.932,492.175 L459.87,494.831 L463.588,494.831 L464.495,497.487 L467.12,497.487 L466.963,499.081 L469.088,501.737 L470.151,502.269 L471.557,503.144 L471.557,506.519 L472.62,507.394 L474.745,507.394 L475.276,508.269 L475.62,513.05 L476.87,513.925 L476.338,514.644 L476.682,517.456 L480.745,517.3 L484.151,515.05 L484.026,509.269 L488.713,502.644 L488.713,491.706 L486.776,487.987 L486.182,476.269 L484.807,474.112 L482.276,472.175 L481.87,464.925 L483.057,461.612 L481.495,456.331 L480.526,452.05 L479.713,450.862 L477.963,449.894 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="0.6"/>
      </g>
      <g class="2A-Corse-du-Sud">
        <path d="M445.338,488.956 L445.338,491.112 L447.307,492.487 L450.62,494.425 L450.838,495.987 L448.87,496.581 L445.745,497.175 L445.745,498.519 L446.901,499.706 L447.12,503.612 L451.401,504.987 L452.963,505.362 L454.338,507.519 L453.37,508.894 L451.807,509.456 L450.62,511.612 L449.463,512.987 L450.026,516.487 L452.963,516.3 L453.745,516.894 L456.495,515.519 L457.276,516.3 L455.901,519.237 L457.276,520.612 L454.932,522.362 L453.37,525.862 L457.651,526.862 L463.713,527.425 L461.182,530.362 C461.182,530.362 459.993,529.904 459.463,530.144 C459.448,530.151 459.415,530.166 459.401,530.175 C459.396,530.178 459.374,530.203 459.37,530.206 C459.366,530.21 459.342,530.234 459.338,530.237 C459.335,530.242 459.311,530.264 459.307,530.269 C459.301,530.278 459.282,530.29 459.276,530.3 C459.273,530.305 459.279,530.326 459.276,530.331 C459.271,530.342 459.249,530.382 459.245,530.394 C459.243,530.4 459.246,530.419 459.245,530.425 C459.242,530.438 459.215,530.474 459.213,530.487 C459.212,530.501 459.214,530.535 459.213,530.55 C459.213,531.527 457.87,533.894 457.87,533.894 L459.807,536.019 L463.338,538.175 L469.963,539.925 L471.901,540.706 L473.682,541.487 L472.495,543.644 L475.62,543.456 L476.213,544.831 L479.338,544.831 L480.12,541.112 L478.151,540.706 L480.901,537.8 L479.932,536.8 L480.12,535.05 L483.651,533.112 L483.838,530.956 L481.495,530.769 L479.932,532.112 L479.932,530.175 L483.057,529.987 L484.026,527.644 L484.807,520.8 L484.213,517.862 L484.151,515.05 L480.745,517.3 L476.682,517.456 L476.338,514.644 L476.87,513.925 L475.62,513.05 L475.276,508.269 L474.745,507.394 L472.62,507.394 L471.557,506.519 L471.557,503.144 L470.151,502.269 L469.088,501.737 L466.963,499.081 L467.12,497.487 L464.495,497.487 L463.588,494.831 L459.87,494.831 L457.932,492.175 L458.463,491.3 L457.245,490.581 L454.401,491.112 L453.338,490.425 L449.463,490.425 L449.088,489.362 L446.901,488.956 L445.338,488.956 z" fill="#86AAE0"/>
        <path d="M445.338,488.956 L445.338,491.112 L447.307,492.487 L450.62,494.425 L450.838,495.987 L448.87,496.581 L445.745,497.175 L445.745,498.519 L446.901,499.706 L447.12,503.612 L451.401,504.987 L452.963,505.362 L454.338,507.519 L453.37,508.894 L451.807,509.456 L450.62,511.612 L449.463,512.987 L450.026,516.487 L452.963,516.3 L453.745,516.894 L456.495,515.519 L457.276,516.3 L455.901,519.237 L457.276,520.612 L454.932,522.362 L453.37,525.862 L457.651,526.862 L463.713,527.425 L461.182,530.362 C461.182,530.362 459.993,529.904 459.463,530.144 C459.448,530.151 459.415,530.166 459.401,530.175 C459.396,530.178 459.374,530.203 459.37,530.206 C459.366,530.21 459.342,530.234 459.338,530.237 C459.335,530.242 459.311,530.264 459.307,530.269 C459.301,530.278 459.282,530.29 459.276,530.3 C459.273,530.305 459.279,530.326 459.276,530.331 C459.271,530.342 459.249,530.382 459.245,530.394 C459.243,530.4 459.246,530.419 459.245,530.425 C459.242,530.438 459.215,530.474 459.213,530.487 C459.212,530.501 459.214,530.535 459.213,530.55 C459.213,531.527 457.87,533.894 457.87,533.894 L459.807,536.019 L463.338,538.175 L469.963,539.925 L471.901,540.706 L473.682,541.487 L472.495,543.644 L475.62,543.456 L476.213,544.831 L479.338,544.831 L480.12,541.112 L478.151,540.706 L480.901,537.8 L479.932,536.8 L480.12,535.05 L483.651,533.112 L483.838,530.956 L481.495,530.769 L479.932,532.112 L479.932,530.175 L483.057,529.987 L484.026,527.644 L484.807,520.8 L484.213,517.862 L484.151,515.05 L480.745,517.3 L476.682,517.456 L476.338,514.644 L476.87,513.925 L475.62,513.05 L475.276,508.269 L474.745,507.394 L472.62,507.394 L471.557,506.519 L471.557,503.144 L470.151,502.269 L469.088,501.737 L466.963,499.081 L467.12,497.487 L464.495,497.487 L463.588,494.831 L459.87,494.831 L457.932,492.175 L458.463,491.3 L457.245,490.581 L454.401,491.112 L453.338,490.425 L449.463,490.425 L449.088,489.362 L446.901,488.956 L445.338,488.956 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="0.6"/>
      </g>
    </g>
</svg>

Voici le code html correspondant :

<h2 id="img_title">EVOLUTION DU NOMBRE D'HABITANTS PAR OSTÉOPATHE</h2>
<div id="demo_osteo_map_2012_2016">
	<div>
		<?php include("pics/France_departements.svg"); ?>
		<h2>2012</h2>
	</div>
	<div>
		<?php include("pics/France_departements.svg"); ?>
		<h2>2016</h2>
	</div>
</div>

et une partie du CSS :

#img_title{
	text-align: center;
}

#demo_osteo_map_2012_2016{
	display: flex;
}

#demo_osteo_map_2012_2016 div{
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 50%;
}

A partir de là je parviens à colorer :

l’ensemble des départements de France avec :

#demo_osteo_map_2012_2016 div:first-child  path /*Première carte*/
{
	fill: red;
}

#demo_osteo_map_2012_2016 div:last-child  path /*Deuxième carte*/
{
	fill: red;
}

l’ensemble des départements d’une région avec pour la première carte et pour la seconde :

#demo_osteo_map_2012_2016 div:first-child .Provence-Alpes-Côte-dAzur path /*PACA de la première carte*/
{
	fill: red;
}

#demo_osteo_map_2012_2016 div:last-child .Provence-Alpes-Côte-dAzur path /*PACA de la deuxième carte*/
{
	fill: red;
}

mais impossible de colorer individuellement un département. Aucune de ces propositions ne fonctionne :

#demo_osteo_map_2012_2016 div:first-child .05-Hautes-Alpes path /*Hautes-Alpes de la première carte*/
{
	fill: red;
}

#demo_osteo_map_2012_2016 div:first-child .Provence-Alpes-Côte-dAzur .05-Hautes-Alpes path /*Hautes-Alpes de la première carte*/
{
	fill: red;
}

#demo_osteo_map_2012_2016 div:first-child .Provence-Alpes-Côte-dAzur>.05-Hautes-Alpes path /*Hautes-Alpes de la première carte*/
{
	fill: red;
}

Quelle est l'erreur ?

Merci pour l’aide que vous pourrez m’apporter.

EDIT :

Je viens de m'apercevoir de l'erreur en postant ce message :

Le forum me colore le numéro '05' mais pas le reste du nom de la classe, pas l'outil sur lequel je travaille... ça m'a mis la puce à l'oreille.

Effectivement, pas de chiffre accepté (j'en n'avais jamais utilisé auparavant), sans ça marche tout de suite mieux.

-
Edité par Flosteo 2 janvier 2018 à 12:20:01

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
2 janvier 2018 à 17:49:07

Tout simplement en utilisant le nom de ta class dans ta feuille de style exemple :

.83-var{
    fill:lime;
}

et pour les path

.83-var path{
    fill:black;

normalement tu peux le faire directement dans le svg aussi.

comme ceci : path fill="#ED7218 pour les path et pour les groupes (g) fill="#ED7218" après le nom de la class, comme ceci :
<g class="83-var" fill="blue" etc.>

dernière solution si tu aimes le graphisme, tu refais ta carte sous illustration et tu l'enregistre au format svg tu affiche le code à l'enregistrement, tu le copies et tu le colles dans ton site. 
 

Colorer un SVG avec du CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown