Вопросы Теги

Цвет фона d3 svg rect не отображается в firefox [duplicate]

Spark 2.2 +

Spark 2.2 вводит typedLit для поддержки Seq, Map и Tuples ( SPARK-19254 ), и следующие вызовы должны быть поддерживаемый (Scala): 

import org.apache.spark.sql.functions.typedLit

df.withColumn("some_array", typedLit(Seq(1, 2, 3)))
df.withColumn("some_struct", typedLit(("foo", 1, .0.3)))
df.withColumn("some_map", typedLit(Map("key1" -> 1, "key2" -> 2)))

Spark 1.3+ (lit), 1.4+ (array, struct), 2.0+ (map):

Второй аргумент для DataFrame.withColumn должен быть Column, поэтому вы должны использовать литерал: 

from pyspark.sql.functions import lit

df.withColumn('new_column', lit(10))

Если вам нужны сложные столбцы, вы можете их построить с помощью блоков, таких как array: 

from pyspark.sql.functions import array, create_map, struct

df.withColumn("some_array", array(lit(1), lit(2), lit(3)))
df.withColumn("some_struct", struct(lit("foo"), lit(1), lit(.3)))
df.withColumn("some_map", create_map(lit("key1"), lit(1), lit("key2"), lit(2)))

Точно такие же методы могут использоваться в Scala. 

import org.apache.spark.sql.functions.{array, lit, map, struct}

df.withColumn("new_column", lit(10))
df.withColumn("map", map(lit("key1"), lit(1), lit("key2"), lit(2)))

Также возможно, хотя и медленнее использовать UDF.

68
задан Nick Ginanto 19 March 2013 в 15:30
поделиться

7 ответов

Нет, это невозможно, элементы SVG не имеют атрибутов представления background-... .

Чтобы смоделировать этот эффект, вы можете нарисовать прямоугольник за текстовым атрибутом с помощью fill="green" или чего-то подобного (фильтры). С помощью JavaScript вы можете сделать следующее: 

var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttribute("x", SVGRect.x);
    rect.setAttribute("y", SVGRect.y);
    rect.setAttribute("width", SVGRect.width);
    rect.setAttribute("height", SVGRect.height);
    rect.setAttribute("fill", "yellow");
    ctx.insertBefore(rect, textElm);
66
ответ дан Roger 25 August 2018 в 10:07
поделиться

Решение, которое я использовал, это: 

<svg>
  <line x1="100" y1="100" x2="500", y2="100" style="stroke:black; stroke-width: 2"/>    
  <text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
  <text x="150" y="105" style="fill:black">Hello World!</text>  
</svg>

Добавляется дублирующийся текстовый элемент с атрибутами штриха и ширины штриха. Инсульт должен соответствовать цвету фона, а ширина штриха должна быть достаточно большой, чтобы создать «splodge», на котором можно записать фактический текст.

Немного взлома и есть потенциальные проблемы, но работает для меня!

7
ответ дан bartelski 25 August 2018 в 10:07
поделиться

это мой любимый хак (не уверен, что он должен работать). Он ссылается на элемент, который еще не отображается, и он работает довольно хорошо 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
    <defs>
        <filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
            <feFlood flood-color="#00ffff"/>
        </filter>
    </defs>

    <!--Draw the text--> 
    <use xlink:href="#mygroup" filter="url(#removebackground)" />
    <g id="mygroup">
        <text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>  
        <line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/> 
        <line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/> 
    </g>
</svg>

1
ответ дан Calimero100582 25 August 2018 в 10:07
поделиться

Вместо использования тега <text> можно использовать тег <foreignObject> , который позволяет использовать контент XHTML с CSS.

0
ответ дан Chris G 25 August 2018 в 10:07
поделиться

Нет, вы не можете добавить цвет фона к элементам SVG. Вы можете сделать это программно с помощью d3 . 

var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
    .attr("x", bbox.x - padding)
    .attr("y", bbox.y - padding)
    .attr("width", bbox.width + (padding*2))
    .attr("height", bbox.height + (padding*2))
    .style("fill", "red");
12
ответ дан nnattawat 25 August 2018 в 10:07
поделиться

Вы можете использовать фильтр для генерации фона. 

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>

52
ответ дан Robert Longson 25 August 2018 в 10:07
поделиться

Ответа на этот вопрос Robert Longson (@RobertLongson) с изменениями: 

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic" operator="xor"/>
    </filter>
  </defs>
  <text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
  <text x="20" y="50" font-size="50">solid background</text>
</svg>

, и мы не имеем никакого размытия и никакого тяжелого «getBBox» :). Заполнение обеспечивается пробелами в текстовом элементе с фильтром. Это сработало для меня

3
ответ дан Roman Belov 25 August 2018 в 10:07
поделиться