Set solid background for custom svg

[kaliachka]

Hi, guys, thank you for you help and your time in advance!
I'm trying to reuse your svg custom shapes example and i'm currently facing the issue of not being able to change the background at all (it look like .light{fill: red;} from $options->svgDefs is not working for me)

class QRSvgWithHearts extends QRMarkupSVG{

	/**
	 * @inheritDoc
	 */
	protected function paths():string{
		$this->options->connectPaths = false;
		$this->options->markupDark   = '';
		$this->options->markupLight  = '';

		$svg = parent::paths();
		$svg = str_replace('"/>', $this->getFinderPatterns().'"/>', $svg);


		return $svg;
	}


	protected function module(int $x, int $y, int $M_TYPE):string{

		if(
			!$this->matrix->check($x, $y)	
                         || $this->matrix->checkType($x, $y, QRMatrix::M_FINDER)
			|| $this->matrix->checkType($x, $y, QRMatrix::M_FINDER_DOT)
		){
			return '';
		}

		return sprintf('M%1$s %2$s m0.5,0.96 l-0.412,-0.412 a0.3 0.3 0 0 1 0.412,-0.435 a0.3 0.3 0 0 1 0.412,0.435Z', $x, $y);
	}

	protected function getFinderPatterns():string{

		$qz  = $this->options->addQuietzone ? $this->options->quietzoneSize : 0;

		$pos = [
			[0 + $qz, 0 + $qz],
			[0 + $qz, $this->moduleCount - $qz - 7],
			[$this->moduleCount - $qz - 7, 0 + $qz],
		];

		$path   = 'M%1$s,%2$s m2,0 h3 q2,0 2,2 v3 q0,2 -2,2 h-3 q-2,0 -2,-2 v-3 q0,-2 2,-2z m0,1 q-1,0 -1,1 v3 q0,1 1,1 h3 q1,0 1,-1 v-3 q0,-1 -1,-1z m0,2.5 a1.5,1.5 0 1 0 3,0 a1.5,1.5 0 1 0 -3,0Z';
		$finder = [];

		foreach($pos as $coord){
			[$ix, $iy] = $coord;
			$finder[]  = sprintf($path, $ix, $iy);
		}

		return implode(' ', $finder);
	}
}

$options = new QROptions;
$options->outputInterface = QRSvgWithHearts::class;
				$options->svgDefs = '
	<linearGradient id="gradient" x1="100%" y2="100%">
		<stop stop-color="#D70071" offset="0"/>
		<stop stop-color="#9C4E97" offset="0.5"/>
		<stop stop-color="#0035A9" offset="1"/>
	</linearGradient>

	<style><![CDATA[
		.dark{fill: url(#gradient);}
		.light{fill: red;}
	]]></style>';

It renders like that

But as a result i want to have an option to add regular solid background

[codemasher]

Hey, you will need to add a css rule to the <style> section of the svgDefs block, such as svg{background: red;} (note the property name is background or background-color, not fill here) - alternatively you could just add a background-color via stylesheet to the containing html element or the QR Code svg element itself - its css-selector is svg.qrcode by default.

$options->svgDefs = '
	<linearGradient id="gradient" x1="100%" y2="100%">
		<stop stop-color="#D70071" offset="0"/>
		<stop stop-color="#9C4E97" offset="0.5"/>
		<stop stop-color="#0035A9" offset="1"/>
	</linearGradient>

	<style><![CDATA[
		.dark{fill: url(#gradient);}
		.light{fill: red;}
		/* here's the background for the whole svg */
		svg{background: green;}
	]]></style>';

[kaliachka]

Oh, i see, thank you so much!

[codemasher]

Happy to help!