svg 180 draaien zonder gebruik te maken van transform

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Paul Weiss

Paul Weiss

30/07/2024 11:53:27
Quote Anchor link
hallo.

weet iemand wat ik bij de onderstaande htmlcode moet aanpassen zodat de svg 180 vertikaal wordt gedraaid.
Nu is de rechte lijn beneden, maar die zou dus boven moeten komen. echter ik wil dit dus voor elkaar krijgen zonder gebruik te maken van transform. heb weinig kennis van svg/path namelijk.

Hartelijk dank.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
.custom-shape-divider-top-1708357252 {
  /*   position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
  
}

.custom-shape-divider-top-1708357252 svg {
    /* position: relative; */
    display: block;
    width: calc(100% + 1.3px);
    /* height: 101px; */
}

.custom-shape-divider-top-1708357252 .shape-fill {
   fill: var(--fillsvg);
}

</style>

<div id="spiegeltopdivider_2727" class="custom-shape-divider-top-1708357252">
    <svg id="hoogtetopdivider_2727" style="height: 100px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path id="mijntopdivider_2727" style="--fillsvg: #897CA1;" d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z" class="shape-fill"></path>
    </svg>

</div>
 
PHP hulp

PHP hulp

11/10/2024 11:32:40
 
- Ariën  -
Beheerder

- Ariën -

30/07/2024 12:11:28
Quote Anchor link
Wat is er precies mis met transform?
 
Paul Weiss

Paul Weiss

30/07/2024 12:28:21
Quote Anchor link
daar is niets mis mee, echter het wordt geintegreerd in cms. daar wordt de keuze ook nog gegeven om zowel vertikaal als horizontaal te spiegelen. er wordt dan een class toegevoegd met styling rotatex. Maar dat werkt dan op 1 of andere manier niet.
 
Ward van der Put
Moderator

Ward van der Put

30/07/2024 12:50:20
Quote Anchor link
Even zoeken naar een free online SVG editor en daarin de SVG roteren?
 

30/07/2024 20:45:04
Quote Anchor link
Als het goed is kan je in de developer tools van een browser (F12 aantikken) gewoon zien waardoor het komt dat de CSS rotatie niet wordt opgepakt, en daar de bug fixen. Anders maak je het alleen maar onnodig ingewikkeld.

Er is geen andere optie in CSS om te roteren, en je moet het niet willen. CSS transforms worden achteraf door de GPU gedaan. Als je gaat zitten prutsen in de marge wordt niemand daar blij van, niet in de laatste plaats een toekomstige developer die het CMS moet onderhouden en/of doorontwikkelen.
 
Ward van der Put
Moderator

Ward van der Put

31/07/2024 11:12:29
Quote Anchor link
Daarom zou ik de SVG zelf rechtzetten. Anders moet je ergens in commentaar uitleggen dat de normale stand 180 graden geroteerd is, je de rotatie moet uitzetten om de SVG 180 graden te roteren en je bij elke andere hoek steeds 180 graden moet optellen of aftrekken.

En wie leest er nou commentaar...
 
Paul Weiss

Paul Weiss

09/08/2024 12:20:34
Quote Anchor link
bedankt iedereen. ik heb het al op kunnen lossen.
Gewijzigd op 09/08/2024 12:20:49 door Paul Weiss
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.