background fill de un path

[Yoi]

Hola a todos, espero me puedan sacar de una duda, lo que para es que tengo una imagen svg, tengo las coordenadas por cada coordenada o path, le pone una propiedad fill, es posible cambiar ese fill, que es color del fondo de la figura creada? espero haberme hecho explicar, de todas maneras pondre un ejemplo

Código HTML:

<path d="M 272.27234,422.68575 L 272.93079,422.1096 L 273.01309,419.0642 L 274.49464,416.75955 L 275.56464,416.2657 L 276.71699,414.94875 L 274.90619,413.54955 L 274.90619,412.89105 L 276.30544,411.65645 L 277.54004,411.65645 L 277.78699,410.66875 L 276.63464,409.2695 L 276.63464,408.0349 L 277.45774,406.9649 L 277.37544,406.2241 L 275.23544,405.1541 L 275.31774,403.0964 L 276.55234,402.35565 L 277.37544,399.31025212.43434,436.18425 L 213.79244,435.48465 L 215.52094,435.48465 L 216.71439,436.10195 L 220.62404,436.2254 L 222.35249,436.0196 L 222.02324,433.0977 L 221.40594,432.4804 L 221.32364,429.64075 269.26809,423.92035 L 270.66734,422.6446 L 272.27234,422.68575 z" stroke="#818181" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.25" fill="#f4f3f0" original="#f4f3f0" id="map1_an" fill-opacity="1"></path>
 

como ven el fill="#f4f3f0" es el que quiero cambiar con css si es posible o por javascript, como se quiera, espero me colaboren, muchas gracias...

[Oscar_Hidro]

Que tal Yoi, es posible cambiar cambiar el color con css. Lo que no queda muy claro en tu pregunta, es si lo sabes hacer. Si es asi, seria bueno que lo comentaras para orientar al respecto, si no seria interesante que comentaras por que no se puede cambiar el color de fondo.

Saludos !!!

[Yoi]

hola Oscar_Hidro, muchas gracias por responderme ello, claro q si, calro q lo se hacer, mi duda es, como lo hago para una imagen svg? jijji la imagen svg se crea por coordenadas, como muestro en el ejemplo de arriba la imagen se crea con esos path asi

Código HTML:

<path d="M 272.27234,422.68575 L 272.93079,422.1096 L 273.01309,419.0642 L 274.49464,416.75955 L 275.56464,416.2657 L 276.71699,414.94875 L 274.90619,413.54955 L 274.90619,412.89105 L 276.30544,411.65645 L 277.54004,411.65645 L 277.78699,410.66875 L 276.63464,409.2695 L 276.63464,408.0349 L 277.45774,406.9649 L 277.37544,406.2241 L 275.23544,405.1541 L 275.31774,403.0964 L 276.55234,402.35565 L 277.37544,399.31025212.43434,436.18425 L 213.79244,435.48465 L 215.52094,435.48465 L 216.71439,436.10195 L 220.62404,436.2254 L 222.35249,436.0196 L 222.02324,433.0977 L 221.40594,432.4804 L 221.32364,429.64075 269.26809,423.92035 L 270.66734,422.6446 L 272.27234,422.68575 z" stroke="#818181" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.25" fill="#f4f3f0" original="#f4f3f0" id="map1_an" fill-opacity="1"></path>
 

, en si la imgen me queda creada de la siguiente manera

Código HTML:

<svg width="520" height="660">
<g transform="scale(0.6687811838859767) translate(58.99375348484852, 0)">
<path d="M 272.27234,422.68575 L 272.93079,422.1096 L 273.01309,419.0642 L 274.49464,416.75955 L 275.56464,416.2657 L 276.71699,414.94875 L 274.90619,413.54955 L 274.90619,412.89105 L 276.30544,411.65645 L 277.54004,411.65645 L 277.78699,410.66875 L 276.63464,409.2695 L 276.63464,408.0349 L 277.45774,406.9649 L 277.37544,406.2241 L 275.23544,405.1541 L 275.31774,403.0964 L 276.55234,402.35565 L 277.37544,399.31025212.43434,436.18425 L 213.79244,435.48465 L 215.52094,435.48465 L 216.71439,436.10195 L 220.62404,436.2254 L 222.35249,436.0196 L 222.02324,433.0977 L 221.40594,432.4804 L 221.32364,429.64075 269.26809,423.92035 L 270.66734,422.6446 L 272.27234,422.68575 z" stroke="#818181" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.25" fill="#f4f3f0" original="#f4f3f0" id="map1_an" fill-opacity="1"></path></g></svg>
 

la realidad es que quiero cambiar el color de ese path con jquery o css, pero no me deja, asi como tiene un id, trato de hacerlo asi:

Código CSS:

#map1_an{
background-color:#f00;
}
 

pero no me da, tambien con jquery lo intente que en realidad es la opcion mas optima y la que busco la hice asi:

Código Javascript:

$(function(){
        $('#map1_an').css({"background-color":"#f00"});
        })
 

no se si fui muy claro la verdad, espero me colaboren, porq la otra opcion que estoy analizando es crear varios scripts para crear imagenes svg de igual forma pero con diferente fondo y cambiarlas cuando lo necesite...

[Oscar_Hidro]

Ah ok, ya capte la idea de lo que quieres hacer. En teoría no debería haber problema alguno en la manera que lo estás implementando. Veo que tienes un propiedad fill con un color asignado. No has probado cambiar el color al fill???

Y si es asi, prueba con cambiar el #map1_an a la etiqueta <g><g/> ó <svg></svg>

[furoya]

Hay preguntas que honestamente no entiendo.

¿Seguro esas coordenadas están bien escritas?
¿Si quieres cambiar CSS, por qué no usas CSS?
¿Si quieres cambiar el fill, por qué usas background-color?
¿Y por qué no cambiar directamente el atributo fill="#f4f3f0" por fill="#ff0000", como sugiere Oscar_Hidro?

Te modifiqué un poco los valores para que se vea el ejemplo.

Código:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<body style="background:black;">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 150,10 L 75,200 L 225,200 z" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.25" original="#f4f3f0" id="map1_an" fill-opacity="1" style="fill:#ffff00;" />
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M 150,10 L 75,200 L 225,200 z" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.25" original="#f4f3f0" id="map1_an" fill-opacity="1" style="fill:#0000ff;" />
</svg> 
</body>
</html>

Y por favor, la proxima vez que esté completo, mira cómo lo puse yo.

[kseso?]

Con todos los respetos.
Creo que esto, tal como está planteado, no corresponde a Css.
Desconozco la relación que haya establecida entre css y los gráficos así como las especificaciones de éstos: http://www.w3.org/TR/SVG11/ así que quizás lo siguiente es una animalada (una entre tantas otras).
Sus propiedades se basan en atributos y en valores de esos atributos que son totalmente ajenos y desconocidos para Css:
<path d="M 150,10 L 75,200 L 225,200 z" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.25" original="#f4f3f0" id="map1_an" fill-opacity="1" style="fill:#ffff00;" />

Y aunque tenga un id (map1_an) para ser usado como selector de css, desde css sólo podrá actuar sobre propiedades css y sus valores.
No puede declarar en una regla css fill: #xxx porque tal propiedad no existe y el intérprete de css lo ignorará. Tal como haría con "bordes: 0;
....

Todo lo anterior era una reflexión personal sin tener en cuenta la documentación oficial.
Mejor remitimos a ella
http://www.w3.org/TR/SVG11/styling.html

En estos momentos siento no poder dedicarle tiempo. Échele un vistazo, ya le he enlazado los diversas formas de aplicar estilos.

[furoya]

(OK. Lo de poner style="fill: #0000ff;" hasta el final fue una maldad de mi parte. Pero lo que menos me imaginé es que no lo ibas a leer!. Supongo que fue por ese tema de la falta de tiempo...)

Voy a guardar ese enlace. No preguntan mucho sobre SVG, pero a veces encontramos dudas como ésta y conviene tener la referencia oficial. Gracias.

[kseso?]

Sí que lo vi, Furoya. Si te fijas está resaltado en negrita en mi cita.
Pero el tachado lo enmascara.
Lo que pasa que decidí dejar toda argumentación en nada debido a mi desconocimiento de los svg, incluida la especificación, y dentro de esta sus estilos "particulares" o propios de ellos. Entre ese desconocimiento están las propiedades.

Pero regresando a la duda original y a la espera de que Yoi nos confirme si conoce o ya se leyó las especificaciones, en especial mi enlace de #6, ya le adelanto que si quiere modificarlos con el uso de hojas de estilo debe declararlos en ellas, no como atributos.

Un copi&paste:

SVG implementations that support CSS are required to support the following:

External CSS style sheets referenced from the current document (see Referencing external style sheets)
Internal CSS style sheets (i.e., style sheets embedded within the current document, such as within an SVG ‘style’ element)
Inline style (i.e., CSS property declarations within a ‘style’ attribute on a particular SVG element)
The following example shows the use of an external CSS style sheet to set the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:

mystyle.css
rect {
fill: red;
stroke: blue;
stroke-width: 3
}

Con lo que mi suposición en #6, tachada por prudencia, es válida. Los valores colocados en las propiedades que están declaradas en línea como atributos (stroke="red" stroke-width="10") no son accesibles vía el svg css.

Y si utiliza el atributo style prevalecerá sobre las hojas de estilo (especificidad en el entorno css)