Question

我的问题是在外部CSS中覆盖诸如之类的svg元素。

例如，如果我的中有transform: rotate，并且我想在CSS中的媒体查询@media screen and (max-width: 28.125em)上覆盖它。

我的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)

在我的（外部CSS样式样式）中，我希望 transform: rotate再次水平，以便文本再次水平显示。如何运作，请您帮我

问候宿命人

Answer 1

向文本元素添加自定义类。然后，您可以在媒体查询中对该类执行transform: unset，以重置转换（在您自己的CSS文件中）。

.transform-unset {
    transform: unset;
}

编辑：这将旋转整个标头，先前的答案不适用于svg元素，因为它没有旋转，而是以较窄的尺寸制作。另外，旋转后还必须更改位置。

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

Answer 2

我认为您可能需要像这样转换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>

更新

在OP的评论之后，我提出了以下建议：

@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>

我希望对您有帮助

如何在我的外部CSS

2 个答案:

更新