Ayar svg doldurma niteliğinin

Başlangıç sorusu. Svg özniteliğimi değiştirmeye çalıştığımda renk değişkeni neden color.svg çalışmıyor? Diğer her şey çalışır: (sonradan eklenen çevreler için) diğer renkler yanı sıra svg (sizing taken from here) boyutu.Ayar svg doldurma niteliğinin

Sabitler:

// 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;

Şimdi bir svg yapıp seti özelliklerini deneyin.

// 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

CSS'ye ayarlamamayı tercih ederim. Tarayıcıda hiçbir hata atılmıyor. Ben her şey ama bu satırlar yorumladı ve svg hala siyah renkli değil. yorumlarda

kaynak

2016-04-11 ehacinom

CSS yaklaşımı 'background-color' ayarlayarak olurdu. Bu bir seçenek değil, ancak daha sonra her zaman arka plan olarak hizmet ve üzerinde 'fill' ayarlamak için svg aynı genişlik ve yüksekliğe sahip bir dikdörtgen oluşturabilir. – JSBob

Doldurmanın ne yapmasını beklersiniz? SVG'ye dolgu koymak SVG'nin geçmişi üzerinde bir etkisi olmayacaktır. Bununla birlikte, doluluk ayarı *, kendi dolgusu tanımlanmamışsa, SVG'nin içerdiği herhangi bir svg grafiğini (örn. Daire, doğrultu, yol) * etkileyecektir. – meetamit

Gotcha! Tamam, arka plan olarak hizmet vermek veya CSS'de daha kısa yapmak için bir dikdörtgen yapın. Teşekkürler, çünkü svg'nin bir dolgu özniteliği olduğu için kafam karışmıştı ve bunun yalnızca içinde yer alan diğer grafiklere uygulanacağını bilmiyordum. :) – ehacinom

, bunun yerine "tarzı" vardır. Sadece şöyle değiştirin:

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

ve bu kontrol edin: https://css-tricks.com/cascading-svg-fill-color/

kaynak

2016-04-11 21:37:58 Klaujesi

@meetamit bana sadece SVG içerdiği svg grafik etkileyecek bir SVG üzerine dolgu ekleyerek realize etmektedir yardımcı oldu. SVG dolgu özniteliği SVG'nin rengini değiştirmez. @JSBob iki yaklaşımı önerdi: bu dolguyu bir rect ekleyip ayarlamak veya SVG en background-color CSS ayarlanır. SVG en kapsayıcı "dolguyu" attr henüz

kaynak

2016-04-11 19:52:10 ehacinom

cevap

İlgili konular