Einstellung Svg füllen Attribut in Javascript

Anfänger Frage. Warum funktioniert die Farbvariable color.svg nicht, wenn ich versuche, mein Svg-Attribut zu ändern? Alles andere funktioniert: die anderen Farben (für später hinzugefügte Kreise), sowie die Größe des Svg (sizing taken from here).Einstellung Svg füllen Attribut in Javascript

Konstanten:

// colors 
var color = {svg: "black", 
      drop0: "rgba(204, 204, 255, 1)", 
      drop1: "orange"}; 

// margins 
var margin = {top: 20, right: 10, bottom: 20, left: 10}; 
var width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom;

Jetzt mache ich eine svg und Attribute setzen versuchen.

// svg 
var svg = d3.select("body").append("svg") 
    .attr({width: width + margin.left + margin.right, 
      height: height + margin.top + margin.bottom, 
      fill: color.svg}) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// followed by stuff about adding shapes, etc, which work

Ich würde es vorziehen, es nicht in CSS einzustellen. Es werden keine Fehler im Browser angezeigt. Ich habe alles außer diesen Zeilen auskommentiert, und die SVG ist immer noch nicht schwarz gefärbt.

Quelle

2016-04-11 ehacinom

Die CSS-Ansatz, indem 'Hintergrund-color' wäre. Wenn dies jedoch keine Option ist, können Sie immer ein Rechteck mit der gleichen Breite und Höhe wie der Hintergrund erstellen und die Füllung festlegen. – JSBob

Was erwarten Sie von der Einstellung der Füllung? Die Einstellung von fill für ein SVG hat keine Auswirkungen auf den Hintergrund der SVG. Die Fülleinstellung * wirkt sich jedoch auf alle SVG-Grafiken (z. B. Kreis, Rechteck, Pfad) aus, die im SVG enthalten sind, wenn keine eigene Füllung definiert ist. – meetamit

Gotcha! Okay, mache ein Rechteck, das als Hintergrund dient oder mache es kürzer in CSS. Danke, ich war verwirrt, weil SVG ein Füllattribut hat und nicht erkannte, dass das nur für andere Grafiken gelten würde, die darin enthalten sind. :) – ehacinom

Der Container von SVG hat keinen Attr "fill", sondern "Style". ersetzen Sie es einfach wie folgt:

var color = { 
    svg: "black", 
    drop0: "rgba(204, 204, 255, 1)", 
    drop1: "orange" 
}; 

// margins 
var margin = { 
    top: 20, 
    right: 10, 
    bottom: 20, 
    left: 10 
}; 
var width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 
//Now I make an svg and try set attributes. 

// svg 
var svg = d3.select("body").append("svg") 
    .attr("width", 900) 
    .attr("height",600) 
    .style("background-color", color.svg) // <---- HERE 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Here de jsfiddle

und überprüfen diese: https://css-tricks.com/cascading-svg-fill-color/

Quelle

2016-04-11 21:37:58 Klaujesi

@meetamit in Kommentaren half mir zu realisieren, eine Füllung auf einem SVG nur Auswirkungen auf Svg Grafiken in der SVG enthalten. Das SVG-Füllattribut ändert die Farbe des SVG nicht. @JSBob bot zwei Ansätze an: füge ein rect hinzu und setze die Füllung oder setze SVG's background-color in CSS.

Quelle

2016-04-11 19:52:10 ehacinom

Einstellung Svg füllen Attribut in Javascript

Antwort

Verwandte Themen