как переопределить элементы SVG, такие как <text>в моем внешнем CSS

Question

Моя проблема - переопределить элементы SVG, такие как , в моем внешнем CSS.

например, если у меня есть transform: rotate в моем и я хочу переопределить это в медиазапросе @media screen and (max-width: 28.125em) в моем CSS.

мой HTML:

<svg viewBox="0 0 50 250" xmlns="http://www.w3.org/2000/svg">              
                <rect x="4" y="2" width="42" height="245" stroke-width="5" stroke="orange" fill="none"></rect>
                <text x="66" y="148" text-anchor="middle" font-size="38"
                transform="rotate(-90,40,150)">My heading</text>
</svg>

так что теперь у меня есть медиа-запрос

@media screen and (max-width: 28.125em)

в моем (extern CSS-stylechield) и там я хочу, чтобы transform: rotate снова был горизонтальным, чтобы текст снова отображался по горизонтали. как это работает, не могли бы вы помочь мне

приветствие мизантропа

Answer 1

Я думаю, что вам может понадобиться преобразовать элемент svg следующим образом:

 svg { position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 100%;
  transform: translate(0, 0) rotate(0deg);  
  transition:all 1s;
}


@media screen and (max-width: 28.125em){
 svg { 
  transform: translate(0px, -100%) rotate(90deg);  
  height:100vw; 
}
}

<svg viewBox="0 0 50 250" xmlns="http://www.w3.org/2000/svg">              
                <rect x="4" y="2" width="42" height="245" stroke-width="5" stroke="orange" fill="none"></rect>
                <text class="transform-unset"  x="66" y="148" text-anchor="middle" font-size="38" transform="rotate(-90,40,150)">My heading</text>
</svg>

UPDATE

После комментариев ОП я придумал следующее:

@media all {
	/*Farben + Hintergrundbild*/
	html {
		background-color: hsla(211, 13%, 50%, 0.05);

	}

			
	footer {
		background-color: hsla(26, 100%, 50%, 0.65);  
		color: #000000;					
	}
	
	/*Schrift*/
	html {
			font-family: 'Variable-Bold' sans-serif;
			font-size: 120%;
			line-height: 100%;
			hyphens: auto;
	}

	
	svg { display:block;
        margin:auto;
    
      position: absolute;
	    top: 0;left: 0;bottom:0;right:0;
	    transform-origin: 50% 50%;
	    transform: rotate(0deg);  
	    transition:all 1s;
	}

	
	/* Grundlayout */
	html, * {
			margin:0; 
			padding: 0;
			box-sizing: border-box;
		}
	*, ::before, ::after {
			box-sizing: inherit;
		}
		
	html, body {
		height: 100vh;
	}
	
	body>main { 
	    max-width: 68em;
		  margin: 0 auto;
	}
	main { 
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        flex: 1 0 59em;
        min-width: 59em;
        margin-left: 4em; /* Platz links fuer den Header schaffen */
        border: 3px dotted red;
    }
	
	
	header { 
        display: flex;
        align-items: center;
        justify-content: center;
        /* flex: 0 0 3rem; */
        width: 5rem;
        min-height: 5rem;
        height: 100vh;
        flex-direction: column;
        justify-content: center; 
        align-content: center;
        border: 14px dotted green;

        position: fixed; /* Header fixieren und Position festlegen */
        left: 0;
        top: 0;
    }


	header h1 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 1rem;
        padding-right: 1rem;
        height: 5rem;
        font-size: 3.5rem;
        outline: 0.5rem solid orange;
        white-space: nowrap;
    
        display: inline-block;
    
        width:100%;
        height:100%;
    
        position:relative;
    }
	
    
    
    /*footer*/
    
    footer {
        margin-top: auto;
        padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    }


/*media queries*/
	@media screen and (max-width: 93.5em){
		svg { 
		    transform: rotate(90deg);  
		    height:50vw; 
        
		}
			header {
			height: 5rem;
			width: 100vw;
		}
		header h1 {
			transform: rotate(0deg);
      
		}
		main {
			margin-left: 0;
			margin-top: 5rem;
		}
	}

<header>
  <h1>
    <svg viewBox="0 0 50 250" xmlns="http://www.w3.org/2000/svg">              
					<rect x="4" y="2" width="42" height="245" stroke-width="5" stroke="orange" fill="none"></rect>
					<text x="66" y="148" text-anchor="middle" font-size="38" transform="rotate(-90,40,150)">Tassilo Sturm</text>
				</svg>
  </h1>
</header>

<main>

  <footer>
    <p>Copyright © 2019 Tassilo Sturm. Alle Rechte vorbehalten.</p>
  </footer>
</main>

Надеюсь, это поможет

Answer 2

Добавить пользовательский класс к текстовому элементу. Затем вы можете сделать transform: unset для этого класса в медиа-запросе, чтобы сбросить преобразование (в вашем собственном файле CSS).

.transform-unset {
    transform: unset;
}

Редактировать: это будет вращать весь заголовок, предыдущий ответ не работал для элемента svg, так как он не вращается, а скорее сделан в узком размере. Также вам придется изменить положение после поворота.

@media screen and (max-width: 62.500em){
  header {
    transform: rotate(90deg);
  }
}