Could not resolve paths sonarscan and bitbucket - bitbucket-pipelines

I'm trying to configure CI on my project.
Here, is the bitbucket-pipelines.yml:
clone:
depth: full
pipelines:
branches:
'{master}':
- step:
name: Tests PHPUnit
services:
- docker
caches:
- docker
script:
- curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
- chmod +x /usr/local/bin/docker-compose
- cd scripts
- sh smf_recreate.sh
- sh smf_init.sh
- sh smf_tests.sh
artifacts:
- back/test-reports/**
- back/src/**
- back/tests/**
- step:
name: Analyse SonarQube
image: maven:3.8.1
caches:
- sonar
script:
- mkdir -p /usr/src/app/
- mv back/src/ /usr/src/app/
- mv back/tests/ /usr/src/app/
- pipe: sonarsource/sonarqube-scan:1.0.0
variables:
SONAR_HOST_URL: ${SONAR_HOST_URL}
SONAR_TOKEN: ${SONAR_TOKEN}
definitions:
caches:
sonar: ~/.sonar
The first step creates a docker container, which makes PHPUnit test, and exports the test-reports (artifacts) to the next step.
The result-coverage.xml look like this:
<?xml version="1.0" encoding="UTF-8"?>
<coverage generated="1629298870">
<project timestamp="1629298870">
<file name="/usr/src/app/src/Controller/TempController.php">
<class name="App\Controller\TempController" namespace="global">
<metrics complexity="0" methods="0" coveredmethods="0" conditionals="0" coveredconditionals="0" statements="0" coveredstatements="0" elements="0" coveredelements="0"/>
</class>
<metrics loc="15" ncloc="10" classes="0" methods="0" coveredmethods="0" conditionals="0" coveredconditionals="0" statements="0" coveredstatements="0" elements="0" coveredelements="0"/>
</file>
<file name="/usr/src/app/src/EventListener/Listener.php">
<class name="App\EventListener\Listener" namespace="global">
<metrics complexity="9" methods="6" coveredmethods="6" conditionals="0" coveredconditionals="0" statements="23" coveredstatements="23" elements="29" coveredelements="29"/>
</class>
<line num="32" type="method" name="__construct" visibility="public" complexity="1" crap="1" count="4"/>
<line num="34" type="stmt" count="4"/>
<line num="35" type="stmt" count="4"/>
<line num="43" type="method" name="prePersist" visibility="public" complexity="1" crap="1" count="1"/>
<line num="46" type="stmt" count="1"/>
<line num="47" type="stmt" count="1"/>
<line num="48" type="stmt" count="1"/>
<line num="56" type="method" name="postPersist" visibility="public" complexity="1" crap="1" count="1"/>
<line num="58" type="stmt" count="1"/>
<line num="66" type="method" name="preUpdate" visibility="public" complexity="1" crap="1" count="1"/>
<line num="68" type="stmt" count="1"/>
<line num="69" type="stmt" count="1"/>
<line num="76" type="method" name="postUpdate" visibility="public" complexity="1" crap="1" count="1"/>
<line num="78" type="stmt" count="1"/>
<line num="79" type="stmt" count="1"/>
<line num="80" type="stmt" count="1"/>
<line num="82" type="stmt" count="1"/>
<line num="91" type="method" name="history" visibility="private" complexity="4" crap="4" count="2"/>
<line num="93" type="stmt" count="2"/>
<line num="94" type="stmt" count="2"/>
<line num="95" type="stmt" count="2"/>
<line num="97" type="stmt" count="2"/>
<line num="100" type="stmt" count="2"/>
<line num="101" type="stmt" count="2"/>
<line num="102" type="stmt" count="2"/>
<line num="103" type="stmt" count="2"/>
<line num="104" type="stmt" count="2"/>
<line num="106" type="stmt" count="2"/>
<line num="108" type="stmt" count="2"/>
<metrics loc="110" ncloc="69" classes="1" methods="6" coveredmethods="6" conditionals="0" coveredconditionals="0" statements="23" coveredstatements="23" elements="29" coveredelements="29"/>
</file>
<file name="/usr/src/app/src/EventListener/ExceptionListener.php">
<class name="App\EventListener\ExceptionListener" namespace="global">
<metrics complexity="3" methods="2" coveredmethods="2" conditionals="0" coveredconditionals="0" statements="20" coveredstatements="20" elements="22" coveredelements="22"/>
</class>
<line num="27" type="method" name="__construct" visibility="public" complexity="1" crap="1" count="1"/>
<line num="29" type="stmt" count="1"/>
<line num="30" type="stmt" count="1"/>
<line num="36" type="method" name="onKernelException" visibility="public" complexity="2" crap="2" count="1"/>
<line num="38" type="stmt" count="1"/>
<line num="40" type="stmt" count="1"/>
<line num="42" type="stmt" count="1"/>
<line num="46" type="stmt" count="1"/>
<line num="47" type="stmt" count="1"/>
<line num="48" type="stmt" count="1"/>
<line num="49" type="stmt" count="1"/>
<line num="50" type="stmt" count="1"/>
<line num="51" type="stmt" count="1"/>
<line num="52" type="stmt" count="1"/>
<line num="53" type="stmt" count="1"/>
<line num="55" type="stmt" count="1"/>
<line num="56" type="stmt" count="1"/>
<line num="58" type="stmt" count="1"/>
<line num="59" type="stmt" count="1"/>
<line num="60" type="stmt" count="1"/>
<line num="62" type="stmt" count="1"/>
<line num="63" type="stmt" count="1"/>
<metrics loc="65" ncloc="50" classes="1" methods="2" coveredmethods="2" conditionals="0" coveredconditionals="0" statements="20" coveredstatements="20" elements="22" coveredelements="22"/>
</file>
<metrics files="3" loc="190" ncloc="129" classes="2" methods="8" coveredmethods="8" conditionals="0" coveredconditionals="0" statements="43" coveredstatements="43" elements="51" coveredelements="51"/>
</project>
</coverage>
As we can see, the "file" attributes starts by "/usr/src/app" which is the context of my docker container.
The problem is on the 2nd step, when Sonarscan trying to analyze the files, it can't find them because it is trying to check at /usr/src/app...
INFO: Analyzing PHPUnit coverage report: back/test-reports/result-coverage.xml
WARN: Could not resolve 3 file paths in result-coverage.xml, first
unresolved path: /usr/src/app/src/Controller/TempController.php
Indeed, in the sonarscan container (2nd step), they are located at /back/src/** ...
How can I tell sonarscan to look at this directory, and not the one specified in result-coverage.xml?
Thanks!

Related

Safari doesn't respect `transform-origin` SVG attribute

I'm trying to build an SVG using transform attribute. But while my SVG looks as expected in Chrome and Firefox it looks broken in Safari. It looks like Safari doesn't respect transform-origin attribute and always applies the transform like transform-origin has "0 0" value.
I need to animate transform attribute and I need the resulting SVG to look the same in all browsers. I tried to work around the issue by providing different values to transform-box CSS property, but without success.
Is there any workaround for the issue?
Below is an example illustrating the issue. All images should look the same. They look the same in Chrome and Firefox, but not in Safari.
h1 {
font-family: sans-serif;
}
figure {
border: thin #c0c0c0 solid;
display: inline-flex;
flex-flow: column;
padding: 5px;
max-width: 200px;
margin: auto;
}
figcaption {
margin-top: 5px;
background-color: #222;
color: #fff;
font: smaller sans-serif;
padding: 3px;
text-align: center;
}
<h1>1. Reference image</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="100" stroke="none" fill="black"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
<circle cx="100" cy="100" r="75" stroke="none" fill="blue"/>
<line x1="100" y1="25" x2="100" y2="175" stroke="rebeccapurple" stroke-width="1.5"/>
<line x1="25" y1="100" x2="175" y2="100" stroke="rebeccapurple" stroke-width="1.5"/>
<circle cx="100" cy="100" r="50" stroke="none" fill="red"/>
<line x1="100" y1="50" x2="100" y2="150" stroke="rebeccapurple" stroke-width="1"/>
<line x1="50" y1="100" x2="150" y2="100" stroke="rebeccapurple" stroke-width="1"/>
<circle cx="100" cy="100" r="25" stroke="none" fill="yellow"/>
<line x1="100" y1="75" x2="100" y2="125" stroke="rebeccapurple" stroke-width="0.5"/>
<line x1="75" y1="100" x2="125" y2="100" stroke="rebeccapurple" stroke-width="0.5"/>
</svg>
<figcaption>Figure 1. Reference image, <code>transform</code> is not used. All other images should look the same.</figcaption>
</figure>
<h1>2. <code>transform</code> applied to <code><g></code> element</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-1">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-1" fill="black"/>
<use href="#target-g-1" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<use href="#target-g-1" fill="red" transform="scale(0.5 0.5)" transform-origin="100 100"/>
<use href="#target-g-1" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 100"/>
</svg>
</svg>
<figcaption>Figure 2-1. Nested <code><svg></code> has the same size as the outermost <code><svg></code>.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-2">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-2" fill="black"/>
<use href="#target-g-2" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-g-2" fill="red" transform="scale(0.5 0.5)" transform-origin="100 0"/>
<use href="#target-g-2" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 33.3333"/>
</svg>
</svg>
<figcaption>Figure 2-2. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-3">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-3" fill="black"/>
<use href="#target-g-3" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-g-3" fill="red" transform="scale(0.5 0.5)" transform-origin="0 0"/>
<use href="#target-g-3" fill="yellow" transform="scale(0.25 0.25)" transform-origin="33.3333 33.3333"/>
</svg>
</svg>
<figcaption>Figure 2-3. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.</figcaption>
</figure>
<h1>3. <code>transform</code> applied to <code><svg></code> element</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-1" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-1" fill="black"/>
<use href="#target-svg-1" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<use href="#target-svg-1" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="100 100"/>
<use href="#target-svg-1" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 100"/>
</svg>
</svg>
<figcaption>Figure 3-1. Nested <code><svg></code> has the same size as the outermost <code><svg></code>.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-2a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-2a" x="0" y="0" fill="black"/>
<use href="#target-svg-2a" x="0" y="0" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-svg-2a" x="0" y="-50" fill="red" transform="scale(0.5 0.5)" transform-origin="100 50"/>
<use href="#target-svg-2a" x="0" y="-50" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 50"/>
</svg>
</svg>
<figcaption>
Figure 3-2a. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.
Transformed <code><svg></code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-2b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-2b" x="0" y="0" fill="black"/>
<use href="#target-svg-2b" x="0" y="0" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-svg-2b" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="100 0"/>
<use href="#target-svg-2b" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 33.333333"/>
</svg>
</svg>
<figcaption>
Figure 3-2b. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.
<code>transform-origin</code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-3a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-3a" fill="black"/>
<use href="#target-svg-3a" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-svg-3a" x="-50" y="-50" fill="red" transform="scale(0.5 0.5)" transform-origin="50 50"/>
<use href="#target-svg-3a" x="-50" y="-50" fill="yellow" transform="scale(0.25 0.25)" transform-origin="50 50"/>
</svg>
</svg>
<figcaption>
Figure 3-3a. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.
Transformed <code><svg></code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-3b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-3b" fill="black"/>
<use href="#target-svg-3b" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-svg-3b" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="0 0"/>
<use href="#target-svg-3b" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="33.333333 33.333333"/>
</svg>
</svg>
<figcaption>
Figure 3-3b. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.
<code>transform-origin</code> is shifted.
</figcaption>
</figure>
Safari has implemented very little of SVG 2 - so the safe way is to only use SVG 1.1 capabilities for cross-browser (there is no transform-origin in SVG 1.1).
The cross-browser way to do this in SVG 1.1. is to transform/translate to the origin, do the scale and then reverse the translation. Something like:
transform="translate(100 200) scale(0.5 0.5) translate(-100 -200)"
Using this technique, the snippet from the question would transform into:
h1 {
font-family: sans-serif;
}
figure {
border: thin #c0c0c0 solid;
display: inline-flex;
flex-flow: column;
padding: 5px;
max-width: 200px;
margin: auto;
}
figcaption {
margin-top: 5px;
background-color: #222;
color: #fff;
font: smaller sans-serif;
padding: 3px;
text-align: center;
}
<h1>1. Reference image</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="100" stroke="none" fill="black"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
<circle cx="100" cy="100" r="75" stroke="none" fill="blue"/>
<line x1="100" y1="25" x2="100" y2="175" stroke="rebeccapurple" stroke-width="1.5"/>
<line x1="25" y1="100" x2="175" y2="100" stroke="rebeccapurple" stroke-width="1.5"/>
<circle cx="100" cy="100" r="50" stroke="none" fill="red"/>
<line x1="100" y1="50" x2="100" y2="150" stroke="rebeccapurple" stroke-width="1"/>
<line x1="50" y1="100" x2="150" y2="100" stroke="rebeccapurple" stroke-width="1"/>
<circle cx="100" cy="100" r="25" stroke="none" fill="yellow"/>
<line x1="100" y1="75" x2="100" y2="125" stroke="rebeccapurple" stroke-width="0.5"/>
<line x1="75" y1="100" x2="125" y2="100" stroke="rebeccapurple" stroke-width="0.5"/>
</svg>
<figcaption>Figure 1. Reference image, <code>transform</code> is not used. All other images should look the same.</figcaption>
</figure>
<h1>2. <code>transform</code> applied to <code><g></code> element</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-1">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-1" fill="black"/>
<use href="#target-g-1" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<use href="#target-g-1" fill="red" transform="translate(100 100) scale(0.5 0.5) translate(-100 -100)"/>
<use href="#target-g-1" fill="yellow" transform="translate(100 100) scale(0.25 0.25) translate(-100 -100)"/>
</svg>
</svg>
<figcaption>Figure 2-1. Nested <code><svg></code> has the same size as the outermost <code><svg></code>.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-2">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-2" fill="black"/>
<use href="#target-g-2" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-g-2" fill="red" transform="translate(100 0) scale(0.5 0.5) translate(-100 -0)"/>
<use href="#target-g-2" fill="yellow" transform="translate(100 33.3333) scale(0.25 0.25) translate(-100 -33.3333)"/>
</svg>
</svg>
<figcaption>Figure 2-2. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-3">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-3" fill="black"/>
<use href="#target-g-3" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-g-3" fill="red" transform="translate(0 0) scale(0.5 0.5) translate(-0 -0)"/>
<use href="#target-g-3" fill="yellow" transform="translate(33.3333 33.3333) scale(0.25 0.25) translate(-33.3333 -33.3333)"/>
</svg>
</svg>
<figcaption>Figure 2-3. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.</figcaption>
</figure>
<h1>3. <code>transform</code> applied to <code><svg></code> element</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-1" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-1" fill="black"/>
<use href="#target-svg-1" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<use href="#target-svg-1" x="0" y="0" fill="red" transform="translate(100 100) scale(0.5 0.5) translate(-100 -100)"/>
<use href="#target-svg-1" x="0" y="0" fill="yellow" transform="translate(100 100) scale(0.25 0.25) translate(-100 -100)"/>
</svg>
</svg>
<figcaption>Figure 3-1. Nested <code><svg></code> has the same size as the outermost <code><svg></code>.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-2a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-2a" x="0" y="0" fill="black"/>
<use href="#target-svg-2a" x="0" y="0" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-svg-2a" x="0" y="-50" fill="red" transform="translate(100 50) scale(0.5 0.5) translate(-100 -50)"/>
<use href="#target-svg-2a" x="0" y="-50" fill="yellow" transform="translate(100 50) scale(0.25 0.25) translate(-100 -50)"/>
</svg>
</svg>
<figcaption>
Figure 3-2a. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.
Transformed <code><svg></code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-2b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-2b" x="0" y="0" fill="black"/>
<use href="#target-svg-2b" x="0" y="0" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-svg-2b" x="0" y="0" fill="red" transform="translate(100 0) scale(0.5 0.5) translate(-100 0)"/>
<use href="#target-svg-2b" x="0" y="0" fill="yellow" transform="translate(100 33.33333) scale(0.25 0.25) translate(-100 -33.33333)"/>
</svg>
</svg>
<figcaption>
Figure 3-2b. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.
<code>transform-origin</code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-3a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-3a" fill="black"/>
<use href="#target-svg-3a" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-svg-3a" x="-50" y="-50" fill="red" transform="translate(50 50) scale(0.5 0.5) translate(-50 -50)"/>
<use href="#target-svg-3a" x="-50" y="-50" fill="yellow" transform="translate(50 50) scale(0.25 0.25) translate(-50 -50)"/>
</svg>
</svg>
<figcaption>
Figure 3-3a. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.
Transformed <code><svg></code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-3b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-3b" fill="black"/>
<use href="#target-svg-3b" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-svg-3b" x="0" y="0" fill="red" transform="scale(0.5 0.5)"/>
<use href="#target-svg-3b" x="0" y="0" fill="yellow" transform="translate(33.333333 33.333333) scale(0.25 0.25) translate(-33.333333 -33.333333)"/>
</svg>
</svg>
<figcaption>
Figure 3-3b. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.
<code>transform-origin</code> is shifted.
</figcaption>
</figure>
According to https://developer.mozilla.org/de/docs/Web/CSS/transform-origin the problem here is that the transform-origin attribute or the transform-origin CSS style in Safari is only applied to the transform style, not the attribute.
So if you change:
<use href="#target-g-1" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
to look like this:
<use href="#target-g-1" fill="blue" style="transform: scale(0.75, 0.75);" transform-origin="100 100"/>
or even this:
<use href="#target-g-1" fill="blue" style="transform: scale(0.75, 0.75);transform-origin:100px 100px"/>
it would work in all browsers.

Height and width attribute of embedded SVG is not being reflected in the browser

When I try to embed an svg within another svg, the height and width of the embedded svg is not respected by the browser and it just defaults to the size of the painted element inside of the svg. This is a problem as I wish to show the effect of a change to the view box attribute on the embedded svg and will hence need some space around the actual element painted into the svg. Is there a way to force the browser to respect the embedded svg's height and width attributes
Example code
<div id='main'>
<svg id="svg-container" width="1200" height="600" >
<defs>
<marker id="1" refX="5" refY="5" markerUnits="markerWidth" markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="2" fill="rgb(255,0,0)"></circle>
</marker>
</defs>
<line x1="0" y1="200" x2="100%" y2="200" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="0" y1="400" x2="100%" y2="400" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="200" y1="0" x2="200" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="400" y1="0" x2="400" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="600" y1="0" x2="600" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="800" y1="0" x2="800" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="1000" y1="0" x2="1000" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<svg x='0' y="0" id="svg-1" width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red" stroke="yellow" stroke-width="5" ></circle>
</svg>
<svg x='200' y="0" id="svg-2" width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="blue" stroke="#27f902" stroke-width="2" ></circle>
</svg>
<svg x='400' y="0" id="svg-2" width="200" height="200">
<rect x="50" y="50" rx="50" ry="20" width="100" height="100" fill="rgb(201, 52, 235)" stroke="blue" stroke-width="2" ></circle>
</svg>
</svg>
</div>

Changeing an SVG from 238 to 266 and now I'm stuck

This was originally 238, I want to change it to 266, and now I'm stuck.
I've done this before, but I forgot how to do it.
I know 7 goes into 266 38 times. See, I forgot how to do all this math, how you're supposed to calculate it.
I'm confused now.
It should all fit evenly I think, or does it not?
<svg width="266" height="266" viewBox="0 0 266 266">
<rect x="0" y="0" width="266" height="266" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
Assuming the original looked like this:
<svg width="238" height="238" viewBox="0 0 238 238">
<rect x="0" y="0" width="238" height="238" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
Then all you have to do to scale it up to 266x266 is to update the width and height attributes.
<svg width="266" height="266" viewBox="0 0 238 238">
Because the SVG has a viewBox, the browser will scale the contents automatically for you.
<svg width="266" height="266" viewBox="0 0 238 238">
<rect x="0" y="0" width="238" height="238" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>

How would I rotate an SVG?

The 1st image is my code now. My question is, if I wanted to rotate the the whole thing so it looks like the below image, what code would I add to it?
https://jsfiddle.net/jw1euh11/
What it looks like now.
I want to Rotate it to This
<svg width="266" height="266" viewBox="0 0 266 266">
<text x="100" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
<text x="197" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
<line x1="264" y1="1" x2="0" y2="1"
style="stroke: #0059dd; stroke-width: 3;"/>
<line x1="265" y1="265" x2="265" y2="0"
style="stroke: #0059dd;stroke-width: 3; "/>
<line x1="100%" y1="265" x2="0" y2="265"
style="stroke: #0059dd ; stroke-width: 3;"/>
<line x1="1" y1="100%" x2="1" y2="0"
style="stroke:#0059dd;stroke-width: 3; "/>
<line x1="0" y1="0" x2="100%" y2="100%"
style="stroke:#0059dd; stroke-width:3" />
<line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:#0059dd; stroke-width:3"/>
</svg>
You can use group <g>...</g> to rotate all together.
<svg width="266" height="266" viewBox="0 0 266 266">
<g transform="rotate(-44, 80, 120)">
<text x="100" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
<text x="197" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
<line x1="264" y1="1" x2="0" y2="1"
style="stroke: #0059dd; stroke-width: 3;"/>
<line x1="265" y1="265" x2="265" y2="0"
style="stroke: #0059dd;stroke-width: 3; "/>
<line x1="100%" y1="265" x2="0" y2="265"
style="stroke: #0059dd ; stroke-width: 3;"/>
<line x1="1" y1="100%" x2="1" y2="0"
style="stroke:#0059dd;stroke-width: 3; "/>
<line x1="0" y1="0" x2="100%" y2="100%"
style="stroke:#0059dd; stroke-width:3" />
<line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:#0059dd; stroke-width:3"/>
</g>
</svg>

JasperReports: Export a xls/ods file with formulas

Recently, I had to export some reports using JasperReports under ods /xls format.
The export works fine but I didn't manage to find a way to add some excel formulas between the exported columns (let's simplify it by saying a sum of some columns as described below).
When user modifies the column A in the excel file, column C gets modified (basic excel formulas, nothing new...)
Based on some comments and answers here is what I've done
<detail>
<band height="134" splitType="Stretch">
<componentElement>
<reportElement x="-20" y="0" width="120" height="60" uuid="884b6c49-9006-464d-982e-e2a5f2cb3e3e">
<property name="com.jaspersoft.studio.layout" value="com.jaspersoft.studio.editor.layout.VerticalRowLayout"/>
</reportElement>
<jr:table xmlns:jr="http://jasperreports.sourceforge.net/jasperreports/components" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports/components http://jasperreports.sourceforge.net/xsd/components.xsd">
<datasetRun subDataset="Empty Dataset1" uuid="b60c3bee-0624-4a6a-bbb1-e706521c0a9a">
<dataSourceExpression><![CDATA[new net.sf.jasperreports.engine.data.JRBeanCollectionDataSource(java.util.Arrays.asList($F{dto}.getNbLgtA()))]]></dataSourceExpression>
</datasetRun>
<jr:column width="40" uuid="1dbb56d0-f25f-410b-9e02-d08b7fe84388">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Colonne1"/>
<jr:tableHeader height="30">
<staticText>
<reportElement x="0" y="0" width="40" height="30" uuid="ff8f394e-39ea-4d08-898f-601e92e6d1f3"/>
<text><![CDATA[A]]></text>
</staticText>
</jr:tableHeader>
<jr:detailCell height="30">
<staticText>
<reportElement x="0" y="0" width="40" height="30" uuid="c0c2b023-2d00-4080-88a3-a73f19fe9cda"/>
<text><![CDATA[1]]></text>
</staticText>
</jr:detailCell>
</jr:column>
<jr:column width="40" uuid="33f41b08-3d77-4076-9712-9514211dd3af">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Colonne2"/>
<jr:tableHeader height="30">
<staticText>
<reportElement x="0" y="0" width="40" height="30" uuid="ad2b74aa-95bf-43d7-83a4-6528f344b410"/>
<text><![CDATA[B]]></text>
</staticText>
</jr:tableHeader>
<jr:detailCell height="30">
<staticText>
<reportElement x="0" y="0" width="40" height="30" uuid="6d121f9e-e92d-45ba-9a48-82bf8b1245e0"/>
<text><![CDATA[2]]></text>
</staticText>
</jr:detailCell>
</jr:column>
<jr:column width="40" uuid="42d367d1-2be7-46bf-838b-ba4c1c6f3399">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Colonne3"/>
<jr:tableHeader height="30">
<staticText>
<reportElement x="0" y="0" width="40" height="30" uuid="63e3dd54-0297-463f-b061-4c536baf62a8"/>
<text><![CDATA[C]]></text>
</staticText>
</jr:tableHeader>
<jr:detailCell height="30">
<property name="net.sf.jasperreports.export.xls.formula" value="SUM(A2, B2)"/>
</jr:detailCell>
</jr:column>
</jr:table>
</componentElement>
</band>
</detail>
But it doesn't work.
Here you could find some useful information about using Excel formulas:
http://jasperreports.sourceforge.net/sample.reference/xlsformula/index.html#xlsformula
For instance, below is an example of using SUM formula (the expression should be enclosed within quotes):
<propertyExpression name="net.sf.jasperreports.export.xls.formula">
<![CDATA["SUM(A1,B1)"]]>
</propertyExpression>
You need to ensure that isDetectCellType property is set to true for your report in order to make a formula to work.
A complete working example (using an empty datasource) is the following:
<detail>
<band height="134" splitType="Stretch">
<componentElement>
<reportElement x="-20" y="0" width="120" height="60" uuid="884b6c49-9006-464d-982e-e2a5f2cb3e3e">
<property name="com.jaspersoft.studio.layout" value="com.jaspersoft.studio.editor.layout.VerticalRowLayout"/>
</reportElement>
<jr:table xmlns:jr="http://jasperreports.sourceforge.net/jasperreports/components" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports/components http://jasperreports.sourceforge.net/xsd/components.xsd">
<datasetRun subDataset="Empty Dataset1" uuid="b60c3bee-0624-4a6a-bbb1-e706521c0a9a">
<dataSourceExpression><![CDATA[new net.sf.jasperreports.engine.JREmptyDataSource()]]></dataSourceExpression>
</datasetRun>
<jr:column width="40" uuid="1dbb56d0-f25f-410b-9e02-d08b7fe84388">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Colonne1"/>
<jr:tableHeader height="30">
<staticText>
<reportElement x="0" y="0" width="40" height="30" uuid="ff8f394e-39ea-4d08-898f-601e92e6d1f3"/>
<text><![CDATA[A]]></text>
</staticText>
</jr:tableHeader>
<jr:detailCell height="30">
<textField pattern="">
<reportElement x="0" y="0" width="40" height="30" uuid="b989d9e8-64d8-467f-a8a0-7b92a1746a0d"/>
<textFieldExpression><![CDATA[1]]></textFieldExpression>
</textField>
</jr:detailCell>
</jr:column>
<jr:column width="40" uuid="33f41b08-3d77-4076-9712-9514211dd3af">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Colonne2"/>
<jr:tableHeader height="30">
<staticText>
<reportElement x="0" y="0" width="40" height="30" uuid="ad2b74aa-95bf-43d7-83a4-6528f344b410"/>
<text><![CDATA[B]]></text>
</staticText>
</jr:tableHeader>
<jr:detailCell height="30">
<textField pattern="">
<reportElement x="0" y="0" width="40" height="30" uuid="3448c5dc-f887-415d-9833-4a22ea5b06c8"/>
<textFieldExpression><![CDATA[2]]></textFieldExpression>
</textField>
</jr:detailCell>
</jr:column>
<jr:column width="40" uuid="42d367d1-2be7-46bf-838b-ba4c1c6f3399">
<property name="com.jaspersoft.studio.components.table.model.column.name" value="Colonne3"/>
<jr:tableHeader height="30">
<staticText>
<reportElement x="0" y="0" width="40" height="30" uuid="63e3dd54-0297-463f-b061-4c536baf62a8"/>
<text><![CDATA[C]]></text>
</staticText>
</jr:tableHeader>
<jr:detailCell height="30">
<textField pattern="">
<reportElement x="0" y="0" width="40" height="30" uuid="63e3ed54-0567-463f-b0c1-4c676baf62a8">
<propertyExpression name="net.sf.jasperreports.export.xls.formula"><![CDATA["SUM(A" +($V{PAGE_COUNT}+2) + ",B" + ($V{PAGE_COUNT}+2) +")"]]></propertyExpression>
</reportElement>
<textFieldExpression><![CDATA[3]]></textFieldExpression>
</textField>
</jr:detailCell>
</jr:column>
</jr:table>
</componentElement>
</band>
</detail>

Resources